How to Re-render a table using Material UI DataGrid?

I am developing a page that fetches data from an API and assembles a table using Material UI and Datagrid. When a user is inserted or updated(new/edit client screen), after submitting, the application returns to the initial screen containing the table. The problem is that the new (or updated) record is not displayed in the table. The update / insert happens in the API correctly, the problem is that my table does not re-render after the submit. When I refresh the page, I can see the updated data in the table. I'm using a class component for the table, I believe that I may have to use it componentDidUpdate to do the re-rendering of the API data but I don't know how to proceed. I appreciate the help.

class TableUser extends Component {

constructor(props) {
    super(props)
    this.state = {
        users: [],
        isLoading: false,
        isError: false,
        search: ''
    }
};

handleChange(event) {
    // Get event value
    let searchValue = event.target.value;
    // Set the state to trigger a re-rendering
    this.setState({ search: searchValue });
};

async componentDidMount() {
    this.setState({ isLoading: true })
    const response = await fetch(API LINK)
    if (response.ok) {
        const users = await response.json()
        this.setState({ users, isLoading: false })
    } else {
        this.setState({ isError: true, isLoading: false })
    }
};

async componentDidUpdate() {
   //????????????????????
};

render() {
    let usersArr = this.state.users;
    console.log('usersArr = ', usersArr)
    let searchString = this.state.search.trim().toLowerCase();
    if (searchString.length > 0) {
        usersArr = usersArr.filter((e) => e.clientName.toLowerCase().match(searchString));
    }

    function CustomToolbar() {
        return <div style={{ fontSize: "20px", fontWeight: "bold", letterSpacing: "0.01em", margin: "5px 10px" }}>All Clients</div>;
    }

    // COLUMNS TABLE
    const columns = [
        { field: 'clientId', headerName: 'clientId', hide: true },
        { field: 'clientName', headerName: 'Client Name', flex: 0.7 },
        { field: 'clientEmail', headerName: 'Email', flex: 1 },
        { field: 'clientWorkPhone', headerName: 'Phone', flex: 0.5 },
        { field: 'clientIndustry', headerName: 'Industry', flex: 0.7 },
        { field: 'clientPocName', headerName: 'Point of Contact', flex: 0.7 },
        { field: 'clientWebsite', headerName: 'Website', flex: 0.7 },
        {
            field: false,
            disableColumnMenu: true,
            flex: 0.4,
            renderCell: (params) => {
                const handleEditClient = (clientId) => {
                    this.props.history.push({ pathname: `/newclient/${clientId}`, state: clientId });
                };
                return <Button onClick={() => {
                    handleEditClient(rows[params.rowIndex].clientId)
                }
                } style={{
                    color: "rgb(81, 49, 185)",
                    border: "solid 1px rgb(81, 49, 185)"
                }}
                    startIcon={< CreateIcon style={{
                        fontSize: "23",
                        marginLeft: "13"
                    }} />}>
                </Button >;
            }
        }
    ];

    let rows = [];
    rows = usersArr.map(function (obj, index) {
        return (
            rows = {
                clientName: obj.clientName,
                clientEmail: obj.clientEmail,
                clientWorkPhone: obj.clientWorkPhone,
                clientIndustry: obj.clientIndustry,
                clientPocName: obj.clientPocName,
                clientWebsite: obj.clientWebsite,
                clientId: obj.clientId,
                id: index
            })
    })
    return (
        <div style={{ maxWidth: "95%" }}>
            {
                this.state.isLoading || !this.state.users ?
                    (<div>loading...</div>
                    ) : (
                        <div>
                            <TextField onChange={(e) => this.handleChange(e)} style={{ background: "white", marginTop: "15px", marginBottom: "15px" }} label="Search" variant="outlined"
                                InputProps={{
                                    startAdornment: (
                                        <InputAdornment position="start">
                                            <SearchIcon />
                                        </InputAdornment>
                                    ),
                                }}
                            />
                            <div style={{ height: 650, width: '100%', backgroundColor: "white" }}>
                                <DataGrid
                                    components={{ Toolbar: CustomToolbar }}
                                    rows={rows} columns={columns}
                                    pageSize={10}
                                    checkboxSelection
                                    autoPageSize
                                    selectedRows={this.state.selectedRows} />
                            </div>
                        </div>
                    )
            }
        </div >
    )
}