Simple React form is not showing the default value (reactHooks) - reactjs

Question

I'm following the official React docs to build a simple form which, however, doesn't work as intended.
const [value, setValue] = useState("banana")
...
<form onSubmit={handleSubmit}>
<label>
Pick your favorite flavor:
<select value={value} onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
As far as I understood, it has to display "banana" as the initial value, whereas it shows "grapefruit". Why is it so?
Here's the link to the docs: https://reactjs.org/docs/forms.html
In the "Forms" section there's an example from where I took the code. It, however, uses class-based components while I use reactHooks. Might it be the problem?
Many thanks!

Answer 1

It shows the first option because value isn't an attribute of <select>. If you want to select one, you need to add a selected attribute to one of the options.
For example:
<label>
Pick your favorite flavor:
<select onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected={true} value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
This is generally written as
const options = ["grapefruit", "lime", "coconut", "mango"];
const selectedValue = "lime";
<label>
Pick your favorite flavor:
<select onChange={handleChange}>
{options.map(o => (<option value={o} selected={o == selectedValue}>{o}</option>)}
</select>
</label>
<input type="submit" value="Submit" />

Answer 2

It is because banana is not in options. If option's value is not present then it will by default pick the first one(Default behaviour). DEMO
import "./styles.css";
import { useState } from "react";
export default function App() {
const [value, setValue] = useState("mango");
const handleChange = (e) => {
setValue(() => {
return e.target.value;
});
};
return (
<div className="App">
<select value={value} onChange={handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</div>
);
}