React js Radio Button Checked Event

<!DOCTYPE html>
<html>

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

function App() {
            const [selectedOption, setSelectedOption] = useState('');

const handleOptionChange = (event) => {
                alert("Selected Value: " + event.target.value);
                setSelectedOption(event.target.value);
            };
            return (
                <div className='container'>
                    <h3>React Js Radio Checked Event</h3>
                    <p>Get Selected Radio Button Value in React</p>

<label>
                        <input
                            type="radio"
                            value="option1"
                            checked={selectedOption === 'option1'}
                            onChange={handleOptionChange}
                        />
                        Option 1
                    </label>

<label>
                        <input
                            type="radio"
                            value="option2"
                            checked={selectedOption === 'option2'}
                            onChange={handleOptionChange}
                        />
                        Option 2
                    </label>
                    <label>
                        <input
                            type="radio"
                            value="option3"
                            checked={selectedOption === 'option3'}
                            onChange={handleOptionChange}
                        />
                        Option 3
                    </label>

<p>Selected option: {selectedOption}</p>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

</html>