React Material UI Select not working properly

I am trying to populate the Select Component from the react Material UI library with options that I will then select and use for form data, I can populate the Select, but it won't let me choose any of the options! This is the code:

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

For my first click on the select box it shows me all the options, logs an error in the console (screenshot below), and then when I try to click on the options it won't let me select any and doesn't trigger any console errors and just gives me the option-click ripple effect.

Here are two helpful screenshots:

Thanks for taking a look