Hello all! 

I have been trying to set up a combobox with a set of true, false values. I get an error upon clicking on the IgrComboBoxColumn cell that crashes the whole app.

index.js:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null.

Here is my code:

import { useAppDispatch, useAppSelector } from '../../hooks';
import { selectSelectedModel, updateItemAsync } from '../model/modelSlice';

import {
  EditModeType,
  IgrDataGrid,
  IgrGridCellValueChangingEventArgs,
  IgrGridDataCommittedEventArgs,
  IgrGridRowEditEndedEventArgs,
  IgrComboBoxColumn,
  IgrTextColumn,
} from 'igniteui-react-grids';
import { selectSelectedParentId } from '../parent/parentSlice';

interface Props {
  dataSource: any[];
}

export function DataGrid(props: Props) {  
  const {dataSource} = props;
  const dispatch = useAppDispatch(); // Shortcut custom hook
  const selectedItem = useAppSelector(selectSelectedModel);
  const selectedParentId = useAppSelector(selectSelectedParentId);
  const booleanOptions = [{ value: 'true' }, { value: 'false' }];
  
  const onCellValueChanging = (
    grid: IgrDataGrid,
    e: IgrGridCellValueChangingEventArgs
  ) => {
    // TODO Remove this test code
    console.log('ELITEST onCellValueChanging', { grid, e });
    //^ TODO Remove this test code
    if (e.newValue === '') {
      grid.setEditError(e.editID, 'Error, cell is empty');
    } else {
      grid.acceptEdit(e.editID);
    }
  };

  const onDataCommitting = (
    grid: IgrDataGrid,
    e: IgrGridDataCommittedEventArgs
  ) => {
    // TODO Remove this test code
    console.log('ELITEST Data Committing', { grid, e });
    //^ TODO Remove this test code
    const newItemAttributes = grid.props.dataSource;
    const newParentItem = {
      ...selectedItem,
      attributes: [...newItemAttributes],
    };

    // Dispatch save event here
    dispatch(
      updateItemAsync({
        parentId: selectedParentId,
        model: newParentItem as ParentItem
      })
    )
  };
  
  const onRowEditEnded = (_: IgrDataGrid, e: IgrGridRowEditEndedEventArgs) => {
    dataSource.push(e.item);
  };

  return (
    <IgrDataGrid
      autoGenerateColumns='false'
      cellValueChanging={onCellValueChanging}
      dataCommitted={onDataCommitting}
      dataSource={dataSource}
      editMode={EditModeType.CellBatch}
      editOnKeyPress='true'
      isColumnOptionsEnabled='true'
      rowEditEnded={onRowEditEnded}
  >
    <IgrTextColumn field='attributeId' isHidden='true' />
    <IgrTextColumn field='name' headerText='Name' />
    <IgrTextColumn field='dimension' headerText='Dimension' />
    <IgrTextColumn field='productLine' headerText='Product Line' />
    <IgrComboBoxColumn
      dataSource={booleanOptions}
      field='isReadOnly'
      headerText='Read Only?'
    />
    <IgrTextColumn field='sortOrder' headerText='Sort Order' />
    <IgrTextColumn field='cellAddress' headerText='Cell Address' />
    <IgrTextColumn field='toolTip' headerText='Tooltip' />
  </IgrDataGrid>
  );
}

Is there something wrong with the shape of my datasource? Any help is appreciated!