Material UI Select component not picking input value - reactjs

Question

I have implemented a Material UI Select component that houses categories from which a user picks. The problem I have is that the category value is not getting picked and as such I get the following Django backend error
IntegrityError at /api/courses/, null value in column "category_id" violates not-null constraint
What could I be doing wrong? Here are the files I am working with.
NewCourseView.js
const newCourse = ({
allcategory,
category,
handleSelectChange,
}) => {
return (
<div>
<br />
<React.Fragment>
<div className="upload-course-form">
<Typography className="form-titltle" variant="h6" gutterBottom>
CREATE COURSE
</Typography>
<Grid item xs={12} sm={6}>
<InputLabel
htmlFor="select-category"
>
Category
</InputLabel>
<Select
name="category"
value={category}
onChange={handleSelectChange}
className="select-categories"
inputProps={{
id: "select-category",
}}
>
{" "}
{allcategory.map(cate => (
<MenuItem key={cate.id} value={cate.id}>
{cate.title}
</MenuItem>
))}
</Select>
</Grid>
<Grid item xs={12}>
<button onClick={handleSubmit} className="submit-course-button">
{" "}
SUBMIT
</button>
</Grid>
</Grid>
</div>
</React.Fragment>
</div>
);
};
newCourse.propTypes = {
handleSubmit: PropTypes.func,
handleSelectChange: PropTypes.func.isRequired,
allcategory: PropTypes.array,
category: PropTypes.number.isRequired,
};
export default newCourse;
NewCourseContainer
export class CreateCourse extends Component {
constructor(props) {
super(props);
this.state = {
category: "",
allcategory: [],
};
}
componentWillMount() {
this.categories();
}
handleSelectChange = e => {
this.setState({ category: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
const data = {
video: {
category: this.state.category,
}
};
this.props.dispatch(createNewCourseAction(data));
};
categories = () => {
let initial = [];
fetch(API_URLS.FETCH_CATEGORIES, {
method: "GET",
headers: myHeaders
})
.then(response => {
return response.json();
})
.then(data => {
initial = data.categorys.results.map(category => {
return category;
});
this.setState({
allcategory: initial
});
})
.catch(error => {
toast.error(error, { autoClose: 3500, hideProgressBar: true });
});
};
render() {
const {
category,
allcategory
} = this.state;
return (
<div>
<NewCourse
handleSubmit={this.handleSubmit}
category={category}
allcategory={allcategory}
handleSelectChange={this.handleSelectChange}
/>
</div>
);
}
const mapDispatchToProps = dispatch => ({ dispatch });
export default connect(
mapStateToProps,
mapDispatchToProps
)(CreateCourse);

Answer 1

In selector:
onChange={(e, k, val) => this.handleSelectChange(e, k, val)}
handleSelectChange:
handleSelectChange = (e, k, val) => {
this.setState({ category: val });
};