fix : bump packages versions

src/components/board/capturedPieces.tsx

@@ -1,6 +1,6 @@
 import { getCapturedPieces, getMaterialDifference } from "@/lib/chess";
 import { Color } from "@/types/enums";
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chess } from "chess.js";
 import { PrimitiveAtom, useAtomValue } from "jotai";
 import { CSSProperties, useMemo } from "react";
@@ -25,7 +25,7 @@ export default function CapturedPieces({ gameAtom, color }: Props) {
   }, [game, color]);
 
   return (
-    <Grid item container alignItems="end" xs="auto" columnGap={0.6}>
+    <Grid container alignItems="end" columnGap={0.6} size="auto">
       {cssProps.map((cssProp, i) => (
         <span
           key={i}

src/components/board/evaluationBar.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, Typography } from "@mui/material";
+import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { PrimitiveAtom, atom, useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { getEvaluationBarValue } from "@/lib/chess";
@@ -32,7 +32,6 @@ export default function EvaluationBar({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"

src/components/board/index.tsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { Chessboard } from "react-chessboard";
 import { PrimitiveAtom, atom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -220,7 +220,6 @@ export default function Board({
 
   return (
     <Grid
-      item
       container
       justifyContent="center"
       alignItems="center"
@@ -236,21 +235,19 @@ export default function Board({
       )}
 
       <Grid
-        item
         container
         rowGap={1}
         justifyContent="center"
         alignItems="center"
         paddingLeft={showEvaluationBar ? 2 : 0}
-        xs
+        size="grow"
       >
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? blackPlayer : whitePlayer}
@@ -263,12 +260,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
           justifyContent="center"
           alignItems="center"
           ref={boardRef}
-          xs={12}
+          size={12}
         >
           <Chessboard
             id={`${boardId}-${canPlay}`}
@@ -296,12 +292,11 @@ export default function Board({
         </Grid>
 
         <Grid
-          item
           container
-          xs={12}
           justifyContent="center"
           alignItems="center"
           columnGap={2}
+          size={12}
         >
           <Typography>
             {boardOrientation === Color.White ? whitePlayer : blackPlayer}