How to set an usestate with an object from another usestate array? - arrays

Question

I need to set an usestate hook with the option selected from a datalist among another usestate array.
Here is my code :
import { useEffect, useState } from 'react';
export function ChooseCar() {
const [cars, setCars] = useState([]);
const [currentCar, setCurrentCar] = useState();
useEffect(() => {
declareCar();
}, [])
function declareCar() {
try {
setCars([]);
setCars(prev => [...prev, { _owner: "John", _brand: "Ferrari", _model: "F458" }]);
setCars(prev => [...prev, { _owner: "Jim", _brand: "Porsche", _model: "993" }]);
setCars(prev => [...prev, { _owner: "Joe", _brand: "Aston Martin", _model: "Vantage" }]);
console.log({ cars });
} catch (err) {
console.log(err);
}
}
function viewConsole() {
console.log(currentCar);
}
return (<div>
<label htmlFor="car-choice">Car :</label>
<input list="Car" id="car-choice" name="car-choice" onChange={e => setCurrentCar(e.target.value)} />
<datalist id="Car">
{cars.map(car => (
<option key={car._owner} value={car._owner}></option>
))}
</datalist>
<div>
<button onClick={declareCar}>Refresh</button>
<button onClick={viewConsole}>console</button>
</div>
<div>{currentCar}</div>
</div>)
}
I need to set my currentCar state with the selected car from the datalist. I'm able to set with car._owner or car._model, but not with the entire car object.
I hope I'm being explicit enough.
Thanks.
I tried to :
e => setCurrentCar(e.target.value)
with
value = car._owner
like in the example above. I tried to use :
<input list="Car" id="car-choice" name="car-choice" onChange={e => setCurrentCar(
e.target.owner,
e.target.brand,
e.target.model
)} />
<datalist id="Car">
{cars.map(car => (
<option key={car._owner} owner={car._owner} brand={car._brand} model={car._model} value={car._owner}></option>
))}
</datalist>
It resulted to currentCar = undefined.
I tried :
<label htmlFor="car-choice">Car :</label>
<input list="Car" id="car-choice" name="car-choice" onChange={e => setCurrentCar(e.target.value)} />
<datalist id="Car">
{cars.map(car => (
<option key={car._owner} value={car._owner} brand={car._brand} model={car}></option>
))}
</datalist>
But it resulted to [object Object]