MUI Grid2 item showing error in typescript

I'm trying to use the Grid2 component from MUI in my React project, but I'm encountering TypeScript errors when using item, xs, and flex props.

Code:

import Grid2 from '@mui/material/Grid2';

<Grid2 container alignItems="center" justifyContent="end">
  <Grid2
    item
    flex={1}
    xs={7}
    style={{
      backgroundColor: index % 2 ? COLOURS.WHITESMOKE : 'transparent',
      marginLeft: '10px',
      borderRadius: '3px',
    }}
  >
    {row.colMeasurement}
  </Grid2>
  <Grid2 item xs={3.7} textAlign="left" pl="5px">
    {row.unit}
  </Grid2>
</Grid2>

Error:

No overload matches this call.
Property 'component' is missing in type '{ item: true; ... }' but required in type '{ component: ElementType; }'.
Also: Property 'item' does not exist on type 'IntrinsicAttributes & GridBaseProps & {...}'.

Firstly I suppose you are using @mui/material v6.
Grid2 is different from Grid, Grid2 has no item or xs props,
It's like:

<Grid2
   size={{ xs:7, md: 4, lg: 1 }}
>
</Grid2>

https://v6.mui.com/material-ui/react-grid2

Secondly Grid2 is deleted from @mui/material v7, they replaced old Grid with Grid2 and renamed it to Grid.
https://v7.mui.com/material-ui/react-grid/