chore: update deps & replace deprecated elements

src/pages/test.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useVerge } from "@/hooks/use-verge";
-import { Box, Button } from "@mui/material";
-import Grid2 from "@mui/material/Grid2";
+import { Box, Button, Grid } from "@mui/material";
 import {
   DndContext,
   closestCenter,
@@ -177,14 +176,14 @@ const TestPage = () => {
           onDragEnd={onDragEnd}
         >
           <Box sx={{ mb: 4.5 }}>
-            <Grid2 container spacing={{ xs: 1, lg: 1 }}>
+            <Grid container spacing={{ xs: 1, lg: 1 }}>
               <SortableContext
                 items={testList.map((x) => {
                   return x.uid;
                 })}
               >
                 {testList.map((item) => (
-                  <Grid2
+                  <Grid
                     component={"div"}
                     size={{ xs: 6, lg: 2, sm: 4, md: 3 }}
                     key={item.uid}
@@ -195,10 +194,10 @@ const TestPage = () => {
                       onEdit={() => viewerRef.current?.edit(item)}
                       onDelete={onDeleteTestListItem}
                     />
-                  </Grid2>
+                  </Grid>
                 ))}
               </SortableContext>
-            </Grid2>
+            </Grid>
           </Box>
         </DndContext>