Tengo el siguiente código donde estoy marcando o desmarcando la casilla de verificación en función de algunas condiciones, y encontré un problema en el que intento marcar la casilla de verificación, y está fallando la primera vez y desde la segunda vez funciona perfectamente.

 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> ); };

No estoy seguro de dónde me equivoqué con el código anterior. El problema solo aparece al intentar marcar la casilla de verificación la primera vez, y desaparece a partir de la segunda vez.

¿Alguien podría sugerir alguna idea sobre esto? ¡¡Muchas gracias de antemano!!

Estoy usando la biblioteca "ANTD" para la casilla de verificación, y el "valor" es una cadena vacía, y el valor predeterminado es "5"