I have below code where I am checking or unchecking the checkbox based on some conditions, and I came across an issue where I am trying to check the checkbox, and it is failing the first time and from the second time onwards works perfectly.

export const AntdDefaultOverrideInputNumberAdapter = ({
  input: { onChange, value },
  disabled,
  defaultValue,
  formatter,
  ...rest
}) => {
  const [isDefaultValueOverriden, setIsDefaultValueOverriden] = useState(
    !!value && value !== defaultValue
  );

  const handleCheckboxChange = () => {
    const hasOverride = !isDefaultValueOverriden;
    setIsDefaultValueOverriden(hasOverride);
    onChange(hasOverride && !!value ? value : defaultValue);
  };

  const handleOverrideChange = (v) => {
    onChange(v);
  };

  return (
    <Badge
      offset={[0, -6]}
      count={
        <div>
            <Checkbox
              disabled={disabled}
              checked={isDefaultValueOverriden}
              onChange={handleCheckboxChange}
              style={{ zIndex: 10 }}
            />
        </div>
      }
    >
      <InputNumber
        size="small"
        onChange={handleOverrideChange}
        disabled={disabled || !isDefaultValueOverriden}
        style={{ width: 65 }}
        value={isDefaultValueOverriden ? value : defaultValue}
        formatter={formatter}
        {...rest}
      />
    </Badge>
  );
};

I am not sure where I am wrong with the above code, The problem only appears on trying to check the checkbox the first time, and it disappears from the second time onwards..

Could anyone suggest any idea on this? Many thanks in advance!!

I am using the "ANTD" library for the checkbox, and the "value" is an empty string, and the defaultValue is "5"