Adapt components to new mui & nextjs versions

components/soumet/ekri-teks.js

@@ -3,23 +3,22 @@ import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import {useSession} from 'next-auth/react'
-import {
-  Box,
-  Button,
-  Container,
-  FormControl,
-  FormHelperText,
-  Grid,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  LinearProgress,
-  OutlinedInput,
-  Snackbar,
-  TextField,
-  Tooltip,
-  Typography
-} from '@mui/material'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Container from '@mui/material/Container'
+import FormControl from '@mui/material/FormControl'
+import FormHelperText from '@mui/material/FormHelperText'
+import Grid from '@mui/material/Unstable_Grid2'
+import IconButton from '@mui/material/IconButton'
+import InputAdornment from '@mui/material/InputAdornment'
+import InputLabel from '@mui/material/InputLabel'
+import LinearProgress from '@mui/material/LinearProgress'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import Snackbar from '@mui/material/Snackbar'
+import TextField from '@mui/material/TextField'
+import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
+
 import MuiAlert from '@mui/material/Alert'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
@@ -293,7 +292,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
       </Box>
       <form noValidate autoComplete='off'>
         <Grid container style={{textAlign: 'center'}} spacing={1}>
-          <Grid item xs>
+          <Grid xs>
             <TextField
               required
               id='awtis'
@@ -306,7 +305,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
               onChange={event => handleUpdate({awtis: event.target.value})}
             />
           </Grid>
-          <Grid item xs>
+          <Grid xs>
             <TextField
               required
               id='tit'