So I have a MUI grid inside a React component that I'm using and have my own custom pagination in the footer of the table. I use the Grid's context API to see the current page and use the setPage method that is provided by the API.

export const Pagination = ({
                               page,
                           }) => {
    const apiRef = useGridApiContext();
    const api = apiRef.current;

    useGridApiEventHandler(apiRef, 'pageChange', (pageNum: number) => {
        // run stuff when the page is changed
    });


    return (
        <Box display="flex" marginTop={2}>
            <ButtonGroup>
                <Button
                    variant="text"
                    aria-label="Previous"
                    onClick={() => api.setPage(page - 1)}
                    size="small"
                >
                </Button>
            </ButtonGroup>
            <ButtonGroup>
                <Button
                    variant="text"
                    aria-label="Next"
                    onClick={() => api.setPage(page + 1)}
                    size="small"
                >
                </Button>
            </ButtonGroup>
        </Box>
    );
};

The onClick handler runs fine, but the Grid's internal state is not changed or affected. It doesn't seem like a MUI grid problem. Does anyone have an idea?