title: How to update MUI data grid table
body: <p>I am using Mui Data grid and performing an action on row, say delete.
  I could able to delete data in back end, but after delete how could I update state to latest data?</p>
  <pre><code>
    const handleConfirmDelete = (expenseId) =&gt; {
      setOpenConfirmDelete(true);
      setfetchExpenseId(expenseId)
    };
  
    const handleDeleteCompleted = async () =&gt; {
  
      // Function for delete
  
      await deleteExpense(fetchExpenseId)
  
      // How can I refresh datagrid here?
  
      setOpenConfirmDelete(false);
      
      console.log(fetchExpenseId)
      enqueueSnackbar(t('The user account has been removed'), {
        variant: 'success',
        anchorOrigin: {
          vertical: 'top',
          horizontal: 'right'
        },
        TransitionComponent: Zoom
      });
    };
  </code></pre>
  <p>Below is columns created for deletefunction</p>
  <pre><code>  const columns = [
      { field: &quot;id&quot;, headerName: &quot;ID&quot;, width: 90 },
      {
        field: &quot;expense_date&quot;,
        headerName: &quot;Expense Date&quot;,
        width: 150,
        editable: true,
        flex: 2,
      },
      {
        field: &quot;actions&quot;,
        headerName: &quot;Actions&quot;,
        editable: true,
        flex: 1,
        renderCell: (params) =&gt; (
          &lt;Typography noWrap&gt;
            &lt;Tooltip title={t(&quot;View&quot;)} arrow&gt;
              &lt;IconButton onClick={() =&gt; handleViewExpense(params.id)} color=&quot;primary&quot;&gt;
                &lt;LaunchTwoToneIcon fontSize=&quot;small&quot; /&gt;
              &lt;/IconButton&gt;
            &lt;/Tooltip&gt;
            &lt;IconButton onClick={() =&gt; handleConfirmDelete(params.id)} color=&quot;primary&quot;&gt;
              &lt;DeleteTwoToneIcon fontSize=&quot;small&quot; /&gt;
            &lt;/IconButton&gt;
          &lt;/Typography&gt;
        ),
      },
    ];
  
  </code></pre>
  <p>Here is the data grid table</p>
  <pre><code>       &lt;div style={{ height: 800, width: &quot;100%&quot; }}&gt;
              &lt;DataGrid
                rows={expenses}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                checkboxSelection
                disableSelectionOnClick
                components={{
                  Toolbar: GridToolbar,
                }}
                columnVisibilityModel={columnVisibilityModel}
                pageSize={pageSize}
                onPageSizeChange={(newPageSize) =&gt; setPageSize(newPageSize)}
                rowsPerPageOptions={[5, 10, 20]}
                pagination
                autoHeight
              /&gt;
            &lt;/div&gt;
  </code></pre>