[DataGrid][question]: Error when customizing checkbox column. The column type "checkboxSelection" you are using is not supported. Column type "string" is being used instead.

[developenguin]

Order ID or Support key 💳 (optional)

60466

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I'm trying to customize the checkbox according to https://mui.com/x/react-data-grid/row-selection/#custom-checkbox-column. It works, but I see a warning in my console:
The column type "checkboxSelection" you are using is not supported. Column type "string" is being used instead.

What I'm doing is this (minimized example):

import React, { useMemo } from 'react';
import { Stack, Box, Typography } from '@mui/material';
import { useTranslation } from 'next-i18next';
import {
  GridColDef,
  GridRowsProp,
  DataGridPremium,
  GRID_CHECKBOX_SELECTION_COL_DEF,
  GridRowParams
} from '@mui/x-data-grid-premium';

const gridHeight = `${(10 + 1 + 1) * 48}px`; // 10 rows, 1 header, 1 footer, row height 48px

const StatusGrid = () => {
  const { t } = useTranslation();
  const data = [];

  const gridColumns: GridColDef[] = useMemo(() => {
    return [
      {
        ...GRID_CHECKBOX_SELECTION_COL_DEF,
        renderHeader: () => ''
      },
      {
        field: 'displayName',
        headerName: t('Name'),
        flex: 1,
        renderCell: (params) => (
          <Typography color="grey.800">
            {params.value}
          </Typography>
        )
      },
      {
        field: 'status',
        headerName: t('status'),
        width: 200
      }
    ];
  }, [t]);

  const gridRows: GridRowsProp = useMemo(() => {
    return data.map((item) => ({
      id: item.name,
      ...item
    }));
  }, [data]);

  return (
    <>
      <Stack spacing={2}>
        <Typography variant="h3" component="h2">
          {t('status')}
        </Typography>
        <Box height={gridHeight} width="100%">
          <DataGridPremium
            checkboxSelection
            disableSelectionOnClick
            hideFooter
            columns={gridColumns}
            rows={gridRows}
          />
        </Box>
      </Stack>
    </>
  );
};

export default StatusGrid;

Am I doing something wrong or did I encounter a bug?
Thanks in advance.

Your environment 🌎

`npx @mui/envinfo`

I'm using Chromium 110.0.5481.100, @mui/envinfo doesn't pick this up for some reason.

    System:
    OS: Linux 5.19 Linux Mint 21.1 (Vera)
  Binaries:
    Node: 18.12.1 - ~/n/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/n/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 111.0b6
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.118 
    @mui/core-downloads-tracker:  5.11.9 
    @mui/icons-material: ^5.11.9 => 5.11.9 
    @mui/material: ^5.11.10 => 5.11.10 
    @mui/private-theming:  5.11.9 
    @mui/styled-engine:  5.11.9 
    @mui/system:  5.11.9 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.2 
    @mui/x-data-grid:  5.17.25 
    @mui/x-data-grid-premium: ^5.17.25 => 5.17.25 
    @mui/x-data-grid-pro:  5.17.25 
    @mui/x-license-pro:  5.17.12 
    @types/react: 18.0.28 => 18.0.28 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.5 => 4.9.5 

[m4theushw]

It's the same pain from #4769

We need to remove this warning.