React Material UI Select 无法正常工作

我正在尝试使用我将选择并用于表单数据的选项从 react Material UI 库中填充 Select Component，我可以填充 Select，但它不会让我选择任何选项！这是代码：

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import { spacing } from '@material-ui/system';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { CardHeader, TextField, CircularProgress } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { movieAction } from '../actions/movieActions';
import { IAppState } from '../store/store';
import axios from 'axios';

const GenreSelect = () => {

  const dispatch = useDispatch()

  const [genreChoice, setGenreChoice] = useState('')

  const getGenres = () => {
    console.log('actions dispatched')
    dispatch(movieAction())
  }

  const handleGenreChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setGenreChoice(event.target.value as string);
    console.log(event.target.value)
  };

  useEffect(() => {
    getGenres()
  }, [])

  const genres = useSelector((state: IAppState) => state.movieState.genres);
  
  const List = () => genres.map((genre: any) => {
    return <MenuItem key={genre.id} value={genre.id}>{genre.name}</MenuItem>
  })

  return (
    <>
    <InputLabel htmlFor="demo-simple-select-label">Genres</InputLabel>
    <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={genreChoice}
    onChange={handleGenreChange}
    >
      <List></List>
    </Select>
    </>
  )
}


const MovieForm = () => {
  return (
    <>
    <h1>Movie Suggester</h1>
    <Paper elevation={3}>
      <Box p={10}>
        <Card>
          <GenreSelect></GenreSelect>
          <Button onClick={() => console.log(axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_MOVIE_API_KEY}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&with_genres=35&page=1`))}>Click me</Button>
        </Card>
      </Box>
    </Paper>
    </>
  )
}


export default MovieForm

我第一次点击选择框时，它会向我显示所有选项，在控制台中记录一个错误（下面的屏幕截图），然后当我尝试点击选项时，它不会让我选择任何选项，也不会触发任何选项控制台错误，只是给我选项点击涟漪效应。

这是两个有用的屏幕截图：

谢谢参观