title: Using modal to add a new data to mui-datatable
body: <p>I need to create a new data using a modal box and this is how I implemented it but apparently the new data is not being added in the datatable. Is their a way to do this? </p>
  
  <p>Here is my code:</p>
  
  <pre><code>let id = 0;
  function createData(name, provider){
    id += 1;
    return [id, name, provider];
  }
  
  const data = [
    createData("Dummy1", "oracle"),
    createData("Dummy2", "mssql"),
    createData("Dummy3", "oracle"),
  ];
  
  
  function ModalBox(props){
    const [open, setOpen] = React.useState(false);
    const [state, setState] = React.useState({
      dname: '',
      dsource: '',
      data
    })
  
    const handleChange = name =&gt; e =&gt;{
      setState({
        ...state,
        [name]: e.target.value,
      })
    }
  
    const handleClickOpen = () =&gt; {
      setOpen(true);
    }
  
    const handleClose = () =&gt; {
      setOpen(false);
    }
  
    const addDataSource = () =&gt;{
      data.push(createData(state.dname, state.dsource));
      setOpen(false);
    }
  
    return(
      &lt;div&gt;
        &lt;Button variant="contained" color="primary" onClick={handleClickOpen}&gt;
          Create New
        &lt;/Button&gt;
        &lt;Dialog
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
        &gt;
        &lt;DialogTitle id="form-dialog-title"&gt;Subscribe&lt;/DialogTitle&gt;
            &lt;DialogContent&gt;
              &lt;DialogContentText&gt;
                To subscribe to this website, please enter your email address here. We will send
                updates occasionally.
              &lt;/DialogContentText&gt;
              &lt;TextField
                autoFocus
                margin="dense"
                id="name"
                label="Name"
                type="text"
                value={state.dname || ''}
                onChange={handleChange('dname')}
                fullWidth
              /&gt;
              &lt;Select
                native
                fullWidth
                value={state.dsource || ''}
                onChange={handleChange('dsource')}
              &gt;
                &lt;option value="" /&gt;
                &lt;option value={'mssql'}&gt;mssql&lt;/option&gt;
                &lt;option value={'oracle'}&gt;oracle&lt;/option&gt;
              &lt;/Select&gt;
            &lt;/DialogContent&gt;
            &lt;DialogActions&gt;
              &lt;Button onClick={handleClose} color="primary"&gt;
                Cancel
              &lt;/Button&gt;
              &lt;Button onClick={addDataSource} color="primary"&gt;
                Add
              &lt;/Button&gt;
            &lt;/DialogActions&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  
  function TestSource(){
  
    const columns = ["Id", "Name", "Provider"];
  
    const options = {
      filterType: 'checkbox',
    };
  
    return(
      &lt;div className="f-height fx-column-cont"&gt;
        &lt;MainToolbar/&gt;
        &lt;Container&gt;
          &lt;ModalBox/&gt;
          &lt;MUIDataTable
            title={"Test Source"}
            data={data}
            columns={columns}
            options={options}
          /&gt;  
        &lt;/Container&gt; 
      &lt;/div&gt;
    );
  }
  
  export default TestSource;
  </code></pre>
  
  <p>I think the problem is that I have a global array and I try to push new data  inside a function. Is there a way to work around this in? Appreciate any advise you could provide on this. </p>