DropDown OnChange Event Using ReactJS

// Dropdown.jsx

import "./style.css";

import React, { useState } from "react"

const Dropdown = () => {
    const [selectedValue, setSelectedValue] = useState("");

    const handleChange = (event) => {
        setSelectedValue(event.target.value);
    }
    console.log("value >>", selectedValue);
    return (
        <div className="container">
            <h3>select an Option from DropDown Menu</h3>

            <select value={selectedValue}  
            onChange={handleChange} className='dropdown'>
                <option value="">--Choose an option--</option>
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
            </select>

            {/* Displaying the selected value */}
            <p>Selected Value: <span className=" answer">
            {selectedValue.length === 0 ? "No option selected" : selectedValue}
            </span></p>
        </div>
    )
}

export default Dropdown;

// App.js

import React from "react"
import Dropdown from "./components/Dropdown"

const App = () => {


    return (
        <div>
            <Dropdown></Dropdown>

        </div>
    )
}

export default App