How to set the first option of the select as default value - reactjs

Question

I would like to set the selectedSubscriber value with first item from subscriberOptions array (subscriberOptions[0].value). What is the best way to do it?
const defaultFormInput = {
subscriberOptions: [],
selectedSubscriber: "",
subscriberOptionsIsLoading: true,
};
const [formInput, setFormInput] = useState(defaultFormInput);
useEffect(() => {
//load subscribers from API
async function loadSubscribers() {
const response = await fetch("https://myapi/subscribers");
const body = await response.json();
setFormInput({
...formInput,
subscriberOptions: body.map((x) => ({ value: x.id, name: x.name })),
subscriberOptionsIsLoading: false,
});
// not working
//setFormInput({
// ...formInput,
// selectedSubscriber: formInput.subscriberOptions[0].value,
//});
}
loadSubscribers();
}, []);
JSX
<Select
disabled={formInput.subscriberOptionsIsLoading}
value={formInput.selectedSubscriber}
name="selectedSubscriber"
onChange={handleChange}
>
{formInput.subscriberOptions &&
formInput.subscriberOptions.map((item) => {
return (
<MenuItem key={item.value} value={item.name}>
{item.name}
</MenuItem>
);
})}
</Select>

Answer 1

you need to map your data and set at the same state, it should work.
const defaultFormInput = {
subscriberOptions: [],
selectedSubscriber: "",
subscriberOptionsIsLoading: true,
};
const [formInput, setFormInput] = useState(defaultFormInput);
useEffect(() => {
//load subscribers from API
async function loadSubscribers() {
const response = await fetch("https://myapi/subscribers");
const body = await response.json();
const mappedData = (body || []).map((x) => ({ value: x.id, name: x.name }));
const [defaultSelect] = mappedData || [];
setFormInput({
...formInput,
subscriberOptions: mappedData,
selectedSubscriber: defaultSelect.value,
subscriberOptionsIsLoading: false,
});
}
loadSubscribers();
}, []);