fix : bump packages versions

src/pages/database.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import {
   DataGrid,
@@ -147,18 +147,18 @@ export default function GameDatabase() {
       gap={4}
       marginTop={6}
     >
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <LoadGameButton />
       </Grid>
 
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <Typography variant="subtitle2">
           You have {games.length} game{games.length !== 1 && "s"} in your
           database
         </Typography>
       </Grid>
 
-      <Grid item maxWidth="100%" minWidth="50px">
+      <Grid maxWidth="100%" minWidth="50px">
         <DataGrid
           aria-label="Games list"
           rows={games}

src/pages/index.tsx

@@ -13,7 +13,7 @@ import {
 import {
   Box,
   Divider,
-  Grid,
+  Grid2 as Grid,
   Tab,
   Tabs,
   useMediaQuery,
@@ -64,14 +64,11 @@ export default function GameReview() {
 
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
-        xs={12}
-        lg
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",
@@ -87,6 +84,10 @@ export default function GameReview() {
         display="grid"
         gridTemplateRows="repeat(4, auto) fit-content(100%)"
         marginTop={isLgOrGreater && window.innerHeight > 780 ? 4 : 0}
+        size={{
+          xs: 12,
+          lg: "grow",
+        }}
       >
         {isLgOrGreater ? (
           <PanelHeader key="analysis-panel-header" />

src/pages/play.tsx

@@ -3,7 +3,7 @@ import GameInProgress from "@/sections/play/gameInProgress";
 import GameRecap from "@/sections/play/gameRecap";
 import GameSettingsButton from "@/sections/play/gameSettings/gameSettingsButton";
 import { isGameInProgressAtom } from "@/sections/play/states";
-import { Grid } from "@mui/material";
+import { Grid2 as Grid } from "@mui/material";
 import { useAtomValue } from "jotai";
 
 export default function Play() {
@@ -15,15 +15,16 @@ export default function Play() {
 
       <Grid
         container
-        item
         marginTop={{ xs: 0, md: "2.5em" }}
         justifyContent="center"
         alignItems="center"
         borderRadius={2}
         border={1}
         borderColor={"secondary.main"}
-        xs={12}
-        md
+        size={{
+          xs: 12,
+          md: "grow",
+        }}
         sx={{
           backgroundColor: "secondary.main",
           borderColor: "primary.main",