React AG Grid – Validate that Custom Cell is not empty if row selected

I have a Grid of 3 columns. Each row has a cell with a Checkbox and two Custom Cell Components (by default empty). Whenever a Custom Cell is clicked, a Modal opens up and allow 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).

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

Here is the code of my Grid:

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

  const [columnDefs] = useState<ColDef[]>([
    {
      field: 'car_brand',
      headerName: 'Car Brand',
      cellRenderer: SelectCarBrand,
    },
    {
      field: 'car_name',
      headerName: 'Car Name',
      cellRenderer: EnterCarName,
    },
  ]);

 const rowSelection = useMemo(() => {
   return {
     mode: 'multiRow',
   };
 }, []);

  return (
    <div>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} rowSelection={rowSelection} />
    </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);
  };

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

      <Modal isOpen={isOpen} onClose={onClose}>
        <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={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default SelectCarBrand;