'react-table: Got Cannot set properties of undefined (setting 'indeterminate') when using custom checkbox for IndeterminateCheckbox component

I want to use my custom checkbox component on the IndeterminateCheckbox based on an example from react-table repo but got Cannot set properties of undefined (setting 'indeterminate')

CustomCheckbox.js

const CustomCheckbox = ({ value, ...props }) => {
  return <input
        type="checkbox"
        value={value}
        {...props}
      />
}

Table.js

import CustomCheckbox from 'path/to/CustomCheckbox';

const IndeterminateCheckbox = forwardRef(
  ({ indeterminate, ...rest }, ref) => {
    const defaultRef = useRef() as any;
    const resolvedRef = ref || defaultRef;

    useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return (
      <>
        <CustomCheckbox ref={resolvedRef} {...rest} />
      </>
    );
  },
);

function Table({column, data}) {
 // ....
}

or go to: https://codesandbox.io/s/nice-wave-86bbu?file=/src/App.js

anyone have a clue why this happens?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source