React Js Find and Replace Text in Textarea

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

function App() {
            const [text, setText] = useState('This is Font Awesome Icons Website');
            const [findValue, setFindValue] = useState('');
            const [replaceValue, setReplaceValue] = useState('');
            const [replacements, setReplacements] = useState(0);

const handleReplace = () => {
                if (findValue.trim() === '') {
                    alert('Please enter a valid find and replace value.');
                    return;
                }

const updatedText = text.replaceAll(findValue, replaceValue);
                const numReplacements = (text.match(new RegExp(findValue, 'g')) || []).length;

setText(updatedText);
                setReplacements(numReplacements);
            };

return (
                <div className="container">
                    <h3>React Js Find And Replace Text in Textarea</h3>
                    <textarea className="text-area" value={text} onChange={(e) => setText(e.target.value)}></textarea>
                    <div class="input-group">
                        <input
                            type="text"
                            className="find-input"
                            value={findValue}
                            onChange={(e) => setFindValue(e.target.value)}
                            placeholder="Find"
                        />
                        <input
                            type="text"
                            className="replace-input"
                            value={replaceValue}
                            onChange={(e) => setReplaceValue(e.target.value)}
                            placeholder="Replace"
                        />
                        <button className="replace-button" onClick={handleReplace}>Replace</button>

</div>
                    <p className="replacements">Replacements: {replacements}</p>
                </div>

);
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 700px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.text-area {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
            box-sizing: border-box;
        }

.input-group {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

.find-input,
        .replace-input {
            flex: 1;
            height: 30px;
            padding: 5px;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

.replace-button {
            height: 30px;
            padding: 5px 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

.replace-button:hover {
            background-color: #45a049;
        }

.replacements {
            margin-left: 10px;
        }
    </style>
</body>

</html>