Как создать новую таблицу с выбранными параметрами из выпадающего списка?

Question

Я хочу создать новую таблицу, состоящую из ранее выбранных опций из выпадающего меню (Material-UI). Поскольку я новичок в React и Material-UI, я не могу понять, как это сделать.

Уже существует таблица, включающая столбец с раскрывающимся списком. Этот раскрывающийся список позволяет выбрать несколько вариантов.

Вход таблицы компонентов:

function TableInput() {

  return (
    <div>
      {/* First table with the multiselect-dropdown */}
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="right">Examns</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell align="right">
                <ExamInput />
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Paper>

      {/* Second table that should be rendered according to the selected options in the first table */}
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell align="right">Exam</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell component="th" scope="row">
                {/* Here the selected options from the first table should be listed */}
                {/* for example. "Master, Bachelor, PhD" */}

              </TableCell>
              <TableCell align="right">
                {/* Here, another multiselect-dropdown should appear according to the rendered option in the first column
                It is used to select the achieved score in the examn 
                Each examn has a predefined list of score options.*/}
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </Paper>
    </div>
  )
}

Компонент ExamnInput (который используется в TableInput):

function ExamInput() {

  const names = ['Abitur', 'Mittlere Reife', 'Master', 'Bachelor']

  const [examn, setExamn] = React.useState<string[]>([])

  function handleChange(event: React.ChangeEvent<{ value: unknown }>) {
    setExamn(event.target.value as string[])
  }

  return (
    <Paper>
      <FormControl>
        <InputLabel htmlFor="select-multiple">Exams</InputLabel>
        <Select
          multiple
          value={examn}
          onChange={handleChange}
          input={<Input id="select-multiple" />}
        >
          {names.map(name => (
            <MenuItem
              key={name}
              value={name}
            >
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Paper>
  )
}

Кроме того, я создал супер простое изображение, показывающее, как все это должно выглядеть.

Заранее большое спасибо!