ReactJS Dialog Component

I have a dialog content component from

https://mui.com/material-ui/react-dialog/

I want it to have drop down options in the input fields. I have the drop down options working with hardcoded values (see menu items below) but I would like to pull the values from a map in another .js file that resides in the same directory. Below is the code for the dialog component.

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import { Select } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import {FormControl} from '@mui/material';
import {InputLabel} from '@mui/material';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { countReset } from 'console';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [className, setClassName] = React.useState('');
  const [assignmentType, setAssignmentType] = React.useState('');

  const handleChangeClass = (event) => {
    setClassName(event.target.value);
  };

  const handleChangeAssignment = (event) => {
    setAssignmentType(event.target.value);
  };

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

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

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Create a New Event</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Please enter the Title of your newly created Event here:
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Title"
            type="title"
            fullWidth
            variant="standard"
          />
          <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Class</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={className}
          label="Classes"
          onChange={handleChangeClass}
        >
          <MenuItem value={course.name}></MenuItem>
          <MenuItem value={'Pyschology'}>Psychology</MenuItem>
          <MenuItem value={'English 101'}>English 101</MenuItem>
        </Select>
      </FormControl>
      <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Assignment Type</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={assignmentType}
          label="Assignment Type"
          onChange={handleChangeAssignment}
          
        >
          <MenuItem value={'Exams'}>Exams</MenuItem>
          <MenuItem value={'Quizzes'}>Quizzes</MenuItem>
          <MenuItem value={'Homework'}>Homework</MenuItem>
        </Select>
        </FormControl>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Save</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

How would I got about this?

I tried exporting the map that contained the values. Maybe I didn’t do it correctly.