Hey guys, I am using NextJS (App Routing) with MUI. I am trying to make my DataGrid responsively grow with the users screen size, the code below is the whole return statement ofc, and in the screenshot u can see the table does not grow, what am I missing?

return (
    <Box sx={{ display: 'grid', gridTemplateRows: 'auto 1fr auto', height: '100%', width: '100%', p: 2 }}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <Box sx={{ marginBottom: 2 }}>
          <TextField
            variant="outlined"
            value={enteredSearch}
            onChange={handleSearch}
            onKeyDown={handleSearchOnEnter}
            placeholder="Search for products..."
            fullWidth
          />
        </Box>
        {!!snackbar && (
          <Snackbar
            open
            anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
            onClose={handleCloseSnackbar}
            autoHideDuration={6000}
          >
            <Alert {...snackbar} onClose={handleCloseSnackbar} />
          </Snackbar>
        )}
        <Paper style={{ overflow: 'auto', flexGrow: 1 }}>
          <DataGridPremium
            rows={products}
            columns={columns}
            pageSize={paginationModel.pageSize}
            rowsPerPageOptions={[10, 25, 50, 100]}
            onCellDoubleClick={handleDescriptionDoubleClick}
            components={{
              Toolbar: GridToolbar,
            }}
            style={{ width: '100%', height: '100%' }}
            loading={loading}
            processRowUpdate={handleRowUpdate}
            onProcessRowUpdateError={
              // print the error message in the console
              (error) => console.error(error)
            }
            paginationMode="server"
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            pagination
            rowCount={totalRowCount}
            apiRef={apiRef}
            onColumnVisibilityModelChange={() => {
              const state = apiRef.current.exportState();
              console.log("Updated Columns State", state);
              localStorage.setItem("COLUMNS_TABLE_STATE", JSON.stringify(state));
            }}
            onColumnWidthChange={() => {
              const state = apiRef.current.exportState();
              console.log("stateWidth", state);
              localStorage.setItem("COLUMNS_TABLE_STATE", JSON.stringify(state));
            }}
          />
        </Paper>
        <HTMLEditorPopup 
          open={openHTMLEditor} 
          setOpen={setOpenHTMLEditor} 
          description={currentDescription} 
          setDescription={setCurrentDescription}
          onSubmit={handleDescriptionSubmit} 
        />
      </div>
    </Box>
  );  
}