React AG Grid – Validate a Custom Cells if Row selected

I have a Grid of 3 columns. Each row contains a cell with a Checkbox and two Custom Cell Components (by default empty). Whenever a Custom Cell is clicked, a Modal opens up allowing the user to:

• Select a value from radio buttons
• Insert a value from input field
  If a row is selected the Custom Cells of that row are mandatory, therefore should not be empty in order to proceed (a Submit button will then be displayed).

I tried using cellClass but it doesn’t work as intended. Also I would like to apply validation and the class on the other cell when the user clicks the Checkbox too.

What is the best way to validate that the Custom Cells of a selected row are not empty and apply a class to it?

Here is the code of my Grid:

const Grid = () => {
  const [rowData] = useState<IRow[]>([
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
    {
      boolean: false,
      car_brand: '',
      car_name: '',
    },
  ]);

  const [columnDefs] = useState<ColDef[]>([
    {
      field: 'boolean',
      headerName: '',
      editable: true,
    },
    {
      field: 'car_brand',
      headerName: 'Car Brand',
      cellRenderer: SelectCarBrand,
      cellClass: (params) => {
        if (params.data.boolean && params.data.car_brand === '') {
          return 'cell-fail';
        }
      },
    },
    {
      field: 'car_name',
      headerName: 'Car Name',
      cellRenderer: EnterCarName,
      cellClass: (params) => {
        if (params.data.boolean && params.data.car_name === '') {
          return 'cell-fail';
        }
      },
    },
  ]);

  return (
    <div>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} />
    </div>
  );
};

export default Grid;

Here is the code of one Custom Component:

const SelectCarBrand = (params: CustomCellRendererProps) => {
    const { isOpen, onOpen, onClose } = useDisclosure();

    const [radioValue, setRadioValue] = useState<string>();


    const handleOnChange = (value: string) => {
        setRadioValue(value);
        params.setValue(value);
    };

    const handleConfirm = () => {
     if (radioValue === undefined || radioValue === '') {
        params.setValue('');
    } else {
        params.setValue(radioValue);
    }
     onClose();
    };

    const handleOnClose = () => {
    if (radioValue === undefined || radioValue === '') {
        params.setValue('');
    }
    onClose();
    };

    return (
    <Box>
        <HStack onClick={onOpen} cursor="pointer">
        {!radioValue && (
            <Text>
            Select Car Brand
            </Text>
        )}
        {radioValue && <Text>{radioValue}</Text>}
        </HStack>

        <Modal isOpen={isOpen} onClose={handleOnClose}>
        <ModalOverlay />
        <ModalContent>
            <ModalHeader>
            Select Car Brand
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
            <RadioGroup onChange={(e) => handleOnChange(e)}>
                <Stack>
                <Radio value="Tesla">
                    <Text>Tesla</Text>
                </Radio>
                <Radio value="Ferrari">
                    <Text>Ferrari</Text>
                </Radio>
                <Radio value="Lamborgini">
                    <Text>Lamborgini</Text>
                </Radio>
                </Stack>
            </RadioGroup>
            </ModalBody>

            <ModalFooter>
            <Button onClick={handleOnConfirm}>
                Confirm
            </Button>
            </ModalFooter>
        </ModalContent>
        </Modal>
    </Box>
    );
};
  
export default SelectCarBrand;