Как я могу добавить новую строку в materail пользовательского интерфейса при отправке формы в реагировать?

Question

Я использую материалы-данные в реакции. Я создал форму реагирования на другой файл js. Для этого я передал функцию onSubmit, которая считывает данные и использует localalstorage для локального хранения объекта.

Мой код формы показан ниже

import React, {createContext, useState} from 'react';
import { useForm } from 'react-hook-form';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
    root: {
      '& .MuiTextField-root': {
        margin: theme.spacing(1),
      },
    },
    submitDiv: {
        textAlign:"right",
    },
    cancelBtn: {
        right:"10px"
    }
}));


export default function Periods() {
    const classes = useStyles();
    //-------UseStates for Add Period ----//
    const { register, handleSubmit,errors, getValues } = useForm();


    const onSubmit = data => { 

        console.log(data);
        localStorage.setItem("quiz",JSON.stringify(data));
        var retrievedObject = localStorage.getItem('testObject');
        console.log(retrievedObject);

    };

    return (
        <React.Fragment>
            <Typography variant="h6" gutterBottom>
                Add Period 
            </Typography>
            <form className={classes.root} onSubmit={handleSubmit(onSubmit)}>
                <TextField
                id="filled-multiline-static"
                label="Question"
                multiline
                fullWidth
                rows="4"
                variant="filled"
                name="question"
                type="text"
                inputRef={register}
                />
                <TextField
                id="filled-textarea"
                label="A.    Add your answer here"
                placeholder="Answer"
                multiline
                fullWidth
                variant="filled"
                name="answer"
                type="text"
                inputRef={register}
                />
                {errors.exampleRequired && <span>This field is required</span>}
                <div className={classes.submitDiv}>
                    <Button 
                    className={classes.cancelBtn} 
                    variant="outlined"
                    >
                    Cancel
                    </Button>
                    <Button 
                    variant="outlined" 
                    color="primary" 
                    type="submit" 
                    onClick={() =>{
                        const values = getValues()
                    }}>
                        Save
                    </Button>
                </div>
            </form>
        </React.Fragment>
    );
}

Таблица пользовательского интерфейса написана так

import React,{useState, useEffect} from 'react';
import { emphasize, withStyles, makeStyles } from '@material-ui/core/styles';
import MaterialTable from 'material-table'


export default function PeriodList(retrievedobjext) {

    let testData = [
        { name: "Event Number 1"},
        { name: "Event Number  2"},
        { name: "Quiz Number 1"},
        { name: "Quiz Number 2"},
        { name: "Quiz Number 3"},
        { name: "Quiz Number 4"},
        { name: "Quiz Number 5"},
      ];

      let columndata =[
        { title:" ", field: "name" },
        { title: " "},
      ];

      let [data, setData] = useState(testData);

      useEffect(() => {
        if (data.length < 100) {
        }
    }, [data]);

    return (
        <MaterialTable
                columns={columndata}
                data={data}
                title = "Period 1"
                localization={{
                  header:{
                    actions:" "
                  },
                  body:{
                    emptyDataSourceMessage: "No Events Provided",
                    filterRow: {
                      filterTooltip: 'Filter'
                    }
                  },
                }}
                options = {{
                  actionsColumnIndex: -1,
                  paging:false,
                  searchFieldStyle: {
                    display: "none"
                  }
                }}
                editable={{
                  /*onRowUpdate: (newData, oldData) =>
                    new Promise((resolve, reject) => {
                      setTimeout(() => {
                        {
                          let newData = data;
                          const index = newData.indexOf(oldData);
                          data[index] = newData;
                          this.setState({ data }, () => resolve());
                        }
                        resolve()
                      }, 1000)
                  }),*/
                  onRowDelete: oldData =>
                      new Promise((resolve, reject) => {
                          setTimeout(() => {
                              let newData = Array.from(data);
                              const index = newData.indexOf(oldData);
                              newData.splice(index, 1);
                              setData(newData);
                              resolve();
                          }, 1000);
                      })
              }}


              />
    );

}

Как добавить новую строку данных в форму отправки?