求帮忙～Nextjs+Mui5，Select怎么用？

Question

前端环境nextjs,14.0.3+Mui5（原Material UI）

'use client'
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, Table, TableBody, TableCell, TableHead, TableRow, TextField, Typography } from "@mui/material";
import { DatePicker, LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import React, { useEffect, useState } from "react";
import { formatDate } from "@/utils/formatDate";

interface City {
    id: number;
    city_name: string;
    cost: {
        name: string;
        price: number;
    }[];
    date: string;
    location: string;
}

export default function CourseManager() {
    const [open, setOpen] = useState(false);
    const [cities, setCities] = useState<City[]>([]);
    const [course, setCourse] = useState([]);
    const [cost, setCost] = useState('');

    useEffect(() => {
        const fetchCourses = async () => {
            const res = await fetch('/api/course_manager');
            // console.log('111', res);
            const data = await res.json();
            // console.log('222', data);
            setCourse(data);
        }
        fetchCourses();
    }, [])

    useEffect(() => {
        const fetchCitys = async () => {
            const res = await fetch('/api/cities');
            const data = await res.json();
            console.log('333', data);
            setCities(data);
        }
        fetchCitys();
    }, [])

    const handleClickOpen = () => {
        setOpen(true);
    }
    const handleClose = () => {
        setOpen(false);
    }

    const handleCourseChange = (event: SelectChangeEvent) => {
        // setCourse(event.target.value as string);
    };

    const handleCostChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setCost(event.target.value);
    };

    return (
        <React.Fragment>
            <Button variant="contained" color="primary" onClick={handleClickOpen}>新增课程</Button>
            <Dialog
                PaperProps={{
                    style: {
                        minWidth: '600px',
                    }
                }}
                open={open}
                onClose={handleClose}
            >
                <DialogTitle>新增课程</DialogTitle>
                <Typography variant="subtitle1" sx={{ ml: 2 }}>
                    课程及费用
                </Typography>
                <FormControl size="small" sx={{ m: 2 }}>
                    <InputLabel id="select-a-city">选择城市</InputLabel>
                    <Select
                        labelId="select-a-city"
                        id="id-select-a-city"
                        value={cities}
                        label="City"
                        onChange={(e) => setCities(e.target.value)}
                    >
                        {cities.map(c => (
                            <MenuItem key={c.id} value={c.city_name}>{c.city_name}</MenuItem>
                        ))}
                    </Select>
                </FormControl>
                <Typography variant="subtitle1" sx={{ ml: 2 }}>
                    课程及费用
                </Typography>
                <Box sx={{ flexGrow: 1, m: 2 }}>
                    <Grid container spacing={3}>
                        <Grid item xs>
                            <FormControl size="small" sx={{ width: 150 }}>
                                <InputLabel id="select-a-course">选择课程</InputLabel>
                                <Select
                                    labelId="select-a-course"
                                    id="demo-select-a-course"
                                    // value={course}
                                    label="Course"
                                    onChange={handleCourseChange}
                                >
                                    <MenuItem value={'课程1'}>课程1</MenuItem>
                                    <MenuItem value={'课程2'}>课程2</MenuItem>
                                    <MenuItem value={'课程3'}>课程3</MenuItem>
                                </Select>
                            </FormControl>
                        </Grid>
                        <Grid item xs={6}>
                            <TextField
                                size="small"
                                value={cost}
                                onChange={handleCostChange}
                            />
                        </Grid>
                        <Grid item xs>
                            <Button>添加</Button>
                        </Grid>
                    </Grid>
                </Box>
                <Typography variant="subtitle1" sx={{ ml: 2 }}>
                    上课时间
                </Typography>
                <Box sx={{ flexGrow: 1, m: 2 }}>
                    <Grid container spacing={2}>
                        <Grid item xs>
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                <DemoContainer components={['DatePicker']}>
                                    <DatePicker format="YYYY年MM月DD日" label="选择日期" />
                                </DemoContainer>
                            </LocalizationProvider>
                        </Grid>
                        <Grid item xs>
                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                <DemoContainer components={['TimePicker']}>
                                    <TimePicker ampm={false} label="选择时间" />
                                </DemoContainer>
                            </LocalizationProvider>
                        </Grid>
                    </Grid>
                </Box>
                <Typography variant="subtitle1" sx={{ ml: 2 }}>
                    上课地址
                </Typography>
                <Box sx={{ m: 2 }}>
                    <TextField
                        size="small"
                        fullWidth
                        value={cost}
                        onChange={handleCostChange}
                    />
                </Box>
                <DialogActions>
                    <Button >取消</Button>
                    <Button >保存</Button>
                </DialogActions>
            </Dialog>
            <h2>课程列表</h2>
            <Table size="medium">
                <TableHead>
                    <TableRow>
                        <TableCell>城市名称</TableCell>
                        <TableCell>课程及费用</TableCell>
                        <TableCell>上课时间</TableCell>
                        <TableCell>上课地点</TableCell>
                        <TableCell>操作</TableCell>
                    </TableRow>
                </TableHead>

                <TableBody>
                    {course.map((row) => (
                        <TableRow key={row.id}>
                            <TableCell>{row.city_name}</TableCell>
                            <TableCell>
                                {row.cost.map(item => (
                                    <div key={item.name}>
                                        <b>{item.name}</b>:{item.price}元
                                    </div>
                                ))}
                            </TableCell>
                            <TableCell>{formatDate(row.date)}</TableCell>
                            <TableCell>{row.location}</TableCell>
                            <TableCell>
                                <Button >编辑</Button>
                                <Button >停止报名</Button>
                                <Button >资料下载</Button>
                                <Button >结课</Button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </React.Fragment>
    )
}

Mui的Select要求MenuItem的value要与Select的value一致。
我就不知道怎么办了。。。
谁能帮帮我啊～
或者是讲讲，Mui的Select要怎么用，看了官方文档，还是没成功。