React - Chatbot Event Handler

<!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(){
        return (
       /*  <div>
            <input />
            <button>Send</button>
          </div>   */
          
          <> {/* using fragment to remove extra div elements */}
             <input placeholder="Send a message to chatbot" size="30"/>
             <button>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 chatMessages = [{
            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'
        } ] ;

   //      function sendMessage() {
//         console.log('send message');
//      }        

       function sendMessage() {
            chatMessages.push({
                message : 'test',
                sender : 'user',
                id : crypto.randomUUID()
            });
        }


        console.log(chatMessages);

        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>