I am pretty new to web development, I want to be able to retrieve the value in the select that is selected in the below code, but I am unable to.
I want to get it in a variable in order to send it using api. I am able to open the dropdown meni and able to
import {useHistory} from 'react-router-dom'import { useForm, FormActions } from '../../context/FormContext'import { Theme } from '../../components/Theme/intex'import { ChangeEvent, useEffect } from 'react'export const FormStep1 = () => { const history = useHistory() const { state, dispatch} = useForm() const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => { dispatch({ type: FormActions.setName, payload: e.target.value }) } const handleNextStep = () =>{ if(state.name !== '') { history.push('/step2') } else{ alert('Please enter your details') } state.team = 'test' } useEffect(()=>{ dispatch({ type: FormActions.setCurrentStep, payload: 1 }) },[]) return(<Theme><C.Container><p className='Step'>Step 1/3</p><h2>Team Name</h2><p>Select Existing Team or Create a New Team</p><label> Select your team_usecase </label><select name="pets" id="pet-select"><option value=""> Select your team </option><option value="dog">dog</option><option value="cat">cat</option><option value="hamster">hamster</option><option value="parrot">parrot</option><option value="spider">spider</option><option value="goldfish">Goldfish</option></select> )}```I was able to find a few solutions but I couldn't get them to work, so any help would be appreciated.