React Js Count the occurrences of each word in a string

<!DOCTYPE html>
<html>

const { useState } = React;
    function App() {
      const [text, setText] = useState('Welcome to Font Awesome Icons ');
      const [wordToCount, setWordToCount] = useState('Font');
      const [count, setCount] = useState(0);

const handleTextChange = (e) => {
        setText(e.target.value);
        // Update the count whenever the text or wordToCount changes
        countOccurrences(e.target.value, wordToCount);
      };

const handleWordToCountChange = (e) => {
        setWordToCount(e.target.value);
        // Update the count whenever the text or wordToCount changes
        countOccurrences(text, e.target.value);
      };

return (
        <div className='container'>
          <h2 className='title'>React Js Counting Occurrences of a specific word/substring in String</h2>
          <textarea
            className='input-textarea'
            placeholder="Enter text here..."
            value={text}
            onChange={handleTextChange}
          />
          <input
            className='input-text'
            type="text"
            placeholder="Word to count"
            value={wordToCount}
            onChange={handleWordToCountChange}
          />
          <p className='result'>Occurrences of "{wordToCount}": {count}</p>
        </div>

);
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    *{
      box-sizing: border-box;
    }
    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border-radius: 5px;
      text-align: center;
    }

.title {
      font-size: 24px;
      margin-bottom: 20px;
    }

.input-textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      resize: vertical;
    }

.input-text {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

.result {
      font-size: 18px;
      font-weight: bold;
      color: #007BFF;
      margin-top: 10px;
    }
  </style>
</body>

</html>