React | Select Amount - reactjs

Question

I have a Dialog where the user is able to create a new Tour. I want to add a Select option to choose the amount of Tours being created. Currently the component is not rerendering onChange and the amount is not being saved. I would really appreciate help :)
My Code looks like this :
const [selectedOption, setSelectedOption] = useState({amount:''});
const handleSelectChange = (event) => {
const amount = event.target.amount;
setSelectedOption({
...selectedOption,
[amount]: event.target.value,
});
};
<FormControl className={classes.formControl}>
<InputLabel
htmlFor="text-simple"
required
>{t('Anzahl Touren')}</InputLabel>
<Select
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: 'amount'
}}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</Select>
</FormControl>
EDIT:
Getting error: Every child in a list should have a unique key prop.
const numberList = ['1','2','3','4','5']
<FormControl className={classes.formControl}>
<InputLabel
htmlFor="text-simple"
required
>{t('Anzahl Touren')}</InputLabel>
<Select
name="amount"
input={<Input id="text-simple"/>}
required
native
value={selectedOption.amount}
onChange={handleSelectChange}
>
{numberList.map((amount,index) => {
return(
<option
key={index}
value={amount}>
{amount}
</option>
)
})}
</Select>
</FormControl>

Answer 1

Try this approach,
Set a name field for select. And update the state based on the name field.
like below,
<Select
name="amount" <--- Add this change
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: "amount"
}}
>
handleSelectChange method:-
const amount = event.target.name;
Complete Code:-
import { FormControl, InputLabel, Select } from "#material-ui/core";
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [selectedOption, setSelectedOption] = useState({ amount: "" });
const handleSelectChange = (event) => {
console.log(event.target.name, event.target.value);
const amount = event.target.name;
setSelectedOption({
...selectedOption,
[amount]: event.target.value
});
};
return (
<>
<FormControl>
<InputLabel htmlFor="text-simple" required>
Anzahl Touren
</InputLabel>
<Select
name="amount"
native
value={selectedOption.amount}
onChange={handleSelectChange}
inputProps={{
amount: "amount"
}}
>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
</Select>
</FormControl>
Selected Amount - {selectedOption.amount}
</>
);
}
Working code - https://codesandbox.io/s/proud-wave-4dz0u?file=/src/App.js:0-1080