React Course - Chatbot - Save input text messages

Below is the code to save th input text message when the SEND buton is clicked. If we right click and inspect the code on the browser, on Console it will show the input messages typed when we click on SEND button.

<!DOCTYPE html>
<html>
  <head>
    <title>Chatbot</title>
  </head>
  <body>
    <div class="js-container"></div>
    

    <script src="https://unpkg.com/supersimpledev/react.js"></script>
    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
 
  <script type="text/babel">
    
       function ChatInput(){
          const [inputText, setInputText] = React.useState('');

          function saveInputText(event) {
          // console.log(event.target.value);
            setInputText(event.target.value);
          }

          function sendMessage() {
            console.log(inputText);
              
          }
        return (
       
          <> {/* using fragment to remove extra div elements */}
             <input placeholder="Send a message to chatbot" 
             size="30"
             onChange={saveInputText}
             />
             <button
               onClick = {sendMessage}
             >Send</button>
          </>

        );
       }

    

      function ChatMessage({message, sender}){
          
          return (
              <div> {/* use div element to put the ChatMessage on a new line */}
              {sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
                {message}
              {sender === 'user' && <img src="human.jpeg" width= "50"/>}
                </div>

              )
          
       }  

function ChatMessages() {
const array = React.useState([{
            message: 'hello chatbot',
            sender: 'user',
            id : 'id1'
        }, {
            message: 'Hello! How can I help you?',
            sender: 'robot',
            id : 'id2'
        },
        {
            message: 'Can you get me todays date?',
            sender: 'user',
            id : 'id3'
        },
        {
            message: 'Today is September 26',
            sender: 'robot',
            id : 'id4'
        } ] );
 
        const chatMessages = array[0];
        const setChatMessages = array[1];
/* in react we should not modify the data directly. 
We should create a copy of the data and modify the copy. */

function sendMessage() {
  setChatMessages([
     ...chatMessages,
   {
      message : 'test',
      sender : 'user',
      id  : crypto.randomUUID()
   }
]);
}
return (
<>
<button onClick={sendMessage}>Send Message </button> 
{chatMessages.map((chatMessage) => {
return (
  <ChatMessage 
     message={chatMessage.message}
     sender={chatMessage.sender}
     key={chatMessage.id}
/>
);
} )}
</>
);
}

      function App (){
        return (<>
        <ChatInput />
        <ChatMessages />
      </>);  

      } 

      //const app = ( App );
      const container = document.querySelector('.js-container');
      ReactDOM.createRoot(container).render(<App />);
    </script>
  </body>
</html>