fix : bump packages versions

src/sections/play/gameInProgress.tsx

@@ -1,4 +1,9 @@
-import { Button, CircularProgress, Grid, Typography } from "@mui/material";
+import {
+  Button,
+  CircularProgress,
+  Grid2 as Grid,
+  Typography,
+} from "@mui/material";
 import { useAtom, useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom } from "./states";
 import { useEffect } from "react";
@@ -22,30 +27,28 @@ export default function GameInProgress() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       gap={2}
+      size={12}
     >
       <Grid
         container
-        item
         justifyContent="center"
         alignItems="center"
-        xs={12}
         gap={2}
+        size={12}
       >
         <Typography>Game in progress</Typography>
         <CircularProgress size={20} color="info" />
       </Grid>
 
-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <UndoMoveButton />
       </Grid>
 
-      <Grid item container justifyContent="center" alignItems="center" xs={12}>
+      <Grid container justifyContent="center" alignItems="center" size={12}>
         <Button variant="outlined" onClick={handleResign}>
           Resign
         </Button>

src/sections/play/gameRecap.tsx

@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom, playerColorAtom } from "./states";
-import { Button, Grid, Typography } from "@mui/material";
+import { Button, Grid2 as Grid, Typography } from "@mui/material";
 import { Color } from "@/types/enums";
 import { setGameHeaders } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
@@ -40,14 +40,13 @@ export default function GameRecap() {
 
   return (
     <Grid
-      item
       container
-      xs={12}
       justifyContent="center"
       alignItems="center"
       gap={2}
+      size={12}
     >
-      <Grid item container xs={12} justifyContent="center">
+      <Grid container justifyContent="center" size={12}>
         <Typography>{getResultLabel()}</Typography>
       </Grid>
 

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -12,7 +12,7 @@ import {
   OutlinedInput,
   DialogActions,
   Typography,
-  Grid,
+  Grid2 as Grid,
   FormGroup,
   FormControlLabel,
   Switch,
@@ -87,14 +87,13 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
         </Typography>
         <Grid
           marginTop={4}
-          item
           container
           justifyContent="center"
           alignItems="center"
-          xs={12}
           rowGap={3}
+          size={12}
         >
-          <Grid item container xs={12} justifyContent="center">
+          <Grid container justifyContent="center" size={12}>
             <FormControl variant="outlined">
               <InputLabel id="dialog-select-label">Bot's engine</InputLabel>
               <Select