The MUI Select component not working and breaking the app on render

Question

The problem is now solved

I am building a modal with a form and want to use the MUI Select component, but as soon as I open the modal, the app breaks; if I remove the Select component, the app works just fine. I can't figure out the problem and any help would be greatly appreciated.

Error Message:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MuiSelectIcon .

This is my current code:

Booking.jsx

Select component

<Box>
                      <InputLabel id="gender">Gender</InputLabel>
                      <Select
                        onChange={handleChange}
                        id="gender-select"
                        required
                        native={false}
                        labelId="gender"
                        value={details?.gender ? details.gender : ""}
                      >
                        <MenuItem value="male">Male</MenuItem>
                        <MenuItem value="female">Female</MenuItem>
                        <MenuItem value="non-binary">Non-binary</MenuItem>
                        <MenuItem value="Prefer not to specify">
                          Prefer not to specify
                        </MenuItem>
                      </Select>
                    </Box>

Imports:

//...
import * as React from "react";
import TextField from "@mui/material/TextField";
import Modal from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import Select from "@mui/material/Select";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/system/Box";

Expected Output:

Answer 1

In your handleChange you are destructuring the name prop and using it as the key of the details object. But you haven't provided any name to select component and therefore the details state changes to something like this after the handleChange fires

{undefined: "female"}

I have forked a working sandbox reproducing your codehere