React js highlight matching text

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

const App = () => {
            const [text, setText] = useState("To highlight matching text in React.js, you can use the String.prototype.replace() method in combination with regular expressions and JSX. Create a function that takes the input text and search query as parameters. Use the replace() method with a regular expression and the query as the pattern, wrapping it in a span element with a CSS class for highlighting. Return the modified JSX with the matching text highlighted. Then, call this function within your component, passing the relevant values. Finally, render the resulting JSX, and the matching text will be visually highlighted using the specified CSS class.");
            const [searchTerm, setSearchTerm] = useState("");
            const [highlightColor, setHighlightColor] = useState("#FFFF00");

const handleSearchTermChange = (e) => {
                setSearchTerm(e.target.value);
                highlightText();
            };

return (
                <div className='container'>
                    <h3>React Js Highlight Matching Text</h3>
                    <label htmlFor="search">Search:</label>
                    <input
                        id="search"
                        value={searchTerm}
                        onChange={handleSearchTermChange}
                        onKeyUp={highlightText}
                    />
                    <div className="text-container">
                        <p dangerouslySetInnerHTML={{ __html: highlightedText() }}></p>
                    </div>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById('app'));
    </script>
    <style>
        .container {
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            width: 600px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

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

label {
            display: block;
            margin-bottom: 10px;
        }

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

.text-container {
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }

p {
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</body>

</html>