How to show a column only when authenticated

I'm building an app using React and MaterialUI. In the DataGrid is there a way to show or "hide" a specific column ? My last column is called action and I have the delete in there and would like to show it to ppl who are loggged in.

Here's my test component.

I've put the part of the code that I thought would do it but unfortunately it's not the case

import { useContext } from 'react';
import { Box} from '@mui/material';
import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
import { BacsRoulantsContext } from '../contexts/BacsRoulantsContext';
import { Delete as DeleteIcon } from '@mui/icons-material';

const trashRows = [
  {
    id: 1,
    serialNumber: '123456',
    rfidChip: '123455',
    bacType: 'DECHETS-360',
    deliveryDate: '2002-03-03',
  },
  {
    id: 2,
    serialNumber: '7890112',
    rfidChip: '123455',
    bacType: 'DECHETS-360',
    deliveryDate: '2002-10-03',
  },
];

export default function Configuration() {
  const { isAuthenticated } = useContext(BacsRoulantsContext); 

  const BINSCOLUMNS = [
    {
      field: 'id',
      headerName: 'ID',
      width: 50,
    },
    {
      field: 'serialNumber',
      headerName: 'Numéro de série',
      width: 150,
      editable: true,
    },
    {
      field: 'rfidCode',
      headerName: 'Puce RFID',
      width: 150,
    },
    {
      field: 'description',
      headerName: 'Type de bacs',
      width: 150,
    },
    {
      field: 'deliveryDate',
      type: 'date',
      headerName: 'Date de livraison',
      width: 160,
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      width: 100,
      cellClassName: 'actions',
      getActions: ({ id }) => {
        **return [
          { isAuthenticated } && (
            <GridActionsCellItem
              icon={<DeleteIcon />}
              label="Cancel"
              onClick={() => console.log('MyID', id)}
            />
          ),
        ];**
      },
    },
  ];


  return (
    <Box sx={{ width: '100%' }}>
        <DataGrid
          autoHeight
          columns={BINSCOLUMNS}
          disableColumnMenu
          hideFooter
          disableSelectionOnClick
          getRowId={(row) => row.id}
          rows={trashRows}
        />
    </Box>
  );
}

For anyone who is wondering how to do it, I found a simple solution. I added the hide: !isAuthenticated on the column definition and that fixed my problem. Here the new column definition with the hide

const BINSCOLUMNS = [
    {
      field: 'id',
      flex: 1,
      headerName: 'ID',
      sortable: false,
    },
    {
      field: 'serialNumber',
      flex: 1,
      headerName: 'Numéro de série',
      sortable: false,
    },
    {
      field: 'rfidCode',
      flex: 1,
      headerName: 'Puce RFID',
      sortable: false,
    },
    {
      field: 'description',
      flex: 1,
      headerName: 'Type de bacs',
      sortable: false,
    },
    {
      field: 'deliveryDate',
      flex: 1,
      headerName: 'Date de livraison',
      sortable: false,
      type: 'date',
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      hide: !isAuthenticated,
      width: 100,
      cellClassName: 'actions',
      getActions: ({ id }) => {
        return [
          <GridActionsCellItem
            icon={<DeleteIcon />}
            label="Cancel"
            onClick={() => console.log('MyID', id)}
          />,
        ];
      },
    },
  ];

Don't know if that's how I'm suppose to do it but works for me!