How to give indeterminate state for multiple checkboxes?

Question

Now I am writing component table where there are many checkboxes. I want to realize logic with indeterminate checkbox.

It can have indeterminate state if one more checkbox is checked.

And if all checkboxes are checked, it gets also checked.

My problem is when I click one more checkbox, everything works ok, but when nothing is checked, my checkbox remains inteterminate state. Why can it happen?

here my component with indeterminate checkbox and function which gives certain state for my checkbox

const TableHeader = (props:IHeader) => {

  const setIndeterminate = () => {
    if (props.data.every((item) => item.selected))
      return false;
    if (props.data.every((item) => !item.selected))
      return false;
    if (props.data.find((item) => item.selected))
      return true;
  };


  return(
    <tr>
      <th>
        <Checkbox
          indeterminate={setIndeterminate()}
          onChange={props.onChangeCheckboxAll}
        />
      </th>
      {props.headers.map((header) =>
        <th
          key={uid()}
          className="table-cell"
        >
          {header.title}
        </th>
      )}
    </tr>
  );
};

my data looks so from server where there are such keys.

interface ITodos {
  id: number;
  title: string;
  body: string;
  selected: boolean;
  disabled: boolean;
  deleted: boolean;
}

my checkbox looks so:

const Checkbox = React.forwardRef<HTMLInputElement, IProps>((props,ref) => {

  const {label, color, className, indeterminate, onChange, disabled, checked, value, id, onChangeId, ...nextProps} = props;

  const checkboxRef = React.useRef<HTMLInputElement>();

  React.useEffect(() => {
    if (checkboxRef?.current && indeterminate) {
      checkboxRef.current.indeterminate = true;
    }
  }, [indeterminate, checkboxRef]);



  const elementRef = (element: HTMLInputElement) => {

    checkboxRef.current = element;

    if (typeof ref === 'function') {
      ref(element);

    } else if (ref) {
      ref.current = element;
    }
  };

  return (
    <div className="checkbox-block">
      <label
        className={classNames(
          className,
          'checkbox',
          `checkbox-${color}`
        )}
      >
        <input
          {...nextProps}
          type="checkbox"
          checked={checked}
          value={value}
          onChange={(event) => {
            onChange && onChange(event);
            onChangeId && onChangeId(id);
          }}
          disabled={disabled}
          ref={elementRef}
        />
        <span>{label}</span>
      </label>
    </div>
  );
});

Thus, my problem is when I click one or more checkboxes, checkbox gets indeterminate state and it works well, but in the case I remove all checked states, my indeterminate checkboxes remains indeterminate state, despite if all checkboxes are checked, or nothing is checked, it is just indeterminate.