Tengo un formulario simple que estoy creando usando reaccionar JS. Tengo 2 campos de texto, Tipo y año, y un menú desplegable que es automóvil. El menú desplegable del automóvil se completa con un valor que proviene de una API. El usuario ingresa el valor de texto para los primeros 2 campos y selecciona el valor para el automóvil en el menú desplegable y presiona agregar. Tengo otra API de publicación que captura este valor. Puedo almacenar y establecer el valor para los cuadros de texto, pero para el menú desplegable, el valor del automóvil no se captura y obtengo un valor nulo. ¿Cómo puedo almacenar el valor del automóvil como lo estoy haciendo para otros 2 cuadros de texto?

 import { useHistory } from "react-router-dom"; import axios from "axios"; import React,{useState,useEffect} from 'react'; function NewCar() { const [type, setType] = useState(""); const [year, setYear] = useState(""); const [car, setCar] = useState(""); let history = useHistory(); const [entries,setEntries]=useState([]) useEffect(() => { fetchValues(); }, []) useEffect(() => { console.log(entries) }, [entries]) const fetchValues = async()=>{ const response = await axios('http://localhost:8080/cars'); setEntries(response.data) } const onSubmit = function (e) { e.preventDefault(); axios .post("http://localhost:8080/update", { type, year, car }) .then(() => history.push("/")); }; return ( <form onSubmit={onSubmit}> <table border="1"> Type:{" "} <input name="type" value={type} onChange={(e) => setType(e.target.value)} /> <br /> Year:{" "} <textarea name="year" value={year} onChange={(e) => setYear(e.target.value)} ></textarea>{" "} <br /> <label for="car">Car:</label> <select id="car" name="car"> {entries.map((entry) => ( <option value={entry.name}>{entry.name}</option> ))} name="car" value={car} onChange={(e) => setCar(e.target.value)} </select> <br /> </table> <button>Add</button> </form> ); } export default NewCar;