React multiple select form saving only one option to array - reactjs

Question

I'm trying to create a multiple select form. But when I submit, only the first option is saved into the array, not all selected options. I'm getting options from locations collection, and I'm submitting the form to the categories collection. What can be the problem?
const handleInputChange = (e) => {
setCategory({ ...category, [e.target.name]: e.target.value });
};
return (
<div>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<select
name='location'
onChange={handleInputChange}
size={locations.length}
className='form-control'
multiple
>
{locations.map((location) => (
<option value={location.title}>
{location.title}
</option>
))}
</select>
</div>
<button>Add</button>
</form>
</div>
);

Answer 1

Please check this example:
import React from 'react';
import MenuItem from '#material-ui/core/MenuItem';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
export default class DropDownMenuExample extends React.Component {
constructor(props) {
super(props);
this.state = {value: []};
}
handleChange(event) {
let value = event.target.value;
this.setState({value})
};
render() {
return (
<div>
<FormControl>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
value={this.state.value}
multiple
onChange={this.handleChange.bind(this)}
>
<MenuItem value={1}>Blue</MenuItem>
<MenuItem value={2}>Red</MenuItem>
<MenuItem value={3}>Green</MenuItem>
<MenuItem value={4}>Black</MenuItem>
<MenuItem value={5}>Purple</MenuItem>
<MenuItem value={6}>Yellow</MenuItem>
<MenuItem value={7}>Maroon</MenuItem>
<MenuItem value={8}>Gray</MenuItem>
<MenuItem value={9}>Silver</MenuItem>
<MenuItem value={10}>Gold</MenuItem>
</Select>
</FormControl>
</div>
);
}
}