Get and set color and color name using drop down in react js

UseState.jsx

import { useState } from "react";

const UseState=()=>{

    const [color, setColorName]=useState('Red');

    const [colorValue,setColor ] =useState('dark')

   const my=(e)=>{

   

    setColor(e.target.value);

    setColorName(e.target.options[e.target.selectedIndex].text);

    }

   

return(

    <>

    <div className="border rounded p-3 text-center">

<h3 className={"text-"+colorValue}>{color}</h3>

    </div>

    <select onChange={my}>

        <option value="primary">Blue</option>

        <option valueb="warning">Yellow</option>

        <option value="success">Green</option>

    </select>

    </>

)

}

export default UseState;

App.js

import logo from './logo.svg';

// import './App.css';

import './css/my.css';

import UseState from './components/Hooks/UseState';

var name="123";

function App() {

 

  return (

  <div className='neeraj'>

<UseState/>

  </div>

  );

}

export default App;