Tengo un componente de casilla de verificación con función onClick y función onKeyPress

El onCLick funciona bien. pero mi onKeyPress hace algunos problemas.

Cuando presiono la barra espaciadora, obtengo un evento onKeyPress que devuelve e.target.checked como verdadero -

Pero cuando presiono enter obtengo e.target.checked como falso -

Mi componente bastante sencillo:

 import React, { forwardRef, useEffect, useState } from "react"; import Root from "./CustomRadioButton.style"; import PropTypes from "prop-types"; const CustomRadioButton = forwardRef((props, ref) => { const { name, label, className, id, onClick, register, onChange, defaultChecked, ariaRequired } = props; useEffect(() => { console.log(checked); }, [checked]) const [checked, setChecked] = useState(""); const hadnleClick = (e) => { return setChecked(e.target.value); }; const hadnleKeyPress = (e) => { console.log(e); if (e.code == "NumpadEnter") { e.preventDefault(); return setChecked(e.target.checked); } } return ( <Root.Wrapper className={className} onClick={onClick} onKeyPress={hadnleKeyPress} > <input type="radio" name={name} id={id} onClick={hadnleClick} value={checked && checked} onChange={onChange} aria-required={ariaRequired} defaultChecked={defaultChecked} {...register} /> <label htmlFor={id}>{label}</label> </Root.Wrapper> ); }); CustomRadioButton.propTypes = { /** * ariaRequired */ ariaRequired: PropTypes.bool, }; CustomRadioButton.defaultProps = { ariaRequired: true }; export default CustomRadioButton;

donde esta mi error

ACTUALIZAR

Moví onkeypress a la entrada todavía no funciona

agregue mi css mayde es el problema

 input[type="radio"]:focus + label::before { border :1px solid black; } input[type="radio"]:checked + label::before { animation: ${checkedAnimtion} 250ms ease-out; background: #3cbfed; box-shadow: inset 0 0 0 5.5px #fdfdff; }