Tengo un problema simple, solo resolví durante 2 horas y no puedo encontrar una solución (soy nuevo en React)

Quiero establecer Estado en verdadero cuando todas las condiciones dentro del uso de Efecto sean verdaderas. Usar el efecto se ejecuta cada vez que hago clic en el botón

 const [allBtnOff, setAllBtnOff] = React.useState(false) React.useEffect(() => { if (btnOff.ER1 === true && btnOff.ER2 === true && btnOff.ER3 === true && btnOff.ER4 === true && btnOff.ER5 === true && btnOff.ER6 === true && btnOff.Dreier === true && btnOff.Vierer === true && btnOff.Full === true && btnOff.Kleine === true && btnOff.Grobe === true && btnOff.Kniffel === true && btnOff.Chance === true ) { setAllBtnOff(prevState => !prevState) console.log(allBtnOff) } },[btnOff])

El problema es que siempre es un paso atrás, así que tengo que hacer clic dos veces en el botón para que sea verdadero.

Para más detalles:

Hago clic en un botón y luego lo configurará como verdadero y deshabilitará el botón. Se ejecutará el efecto de uso al mismo tiempo, por lo que necesito un botón de clic adicional para verificar si las condiciones son verdaderas. ¿Alguna solución?

EDITAR: (tal vez entender más el código ayude)

 // BTN OFF/ON after passing score const [btnOff, setBtnOff] = React.useState({ ER1: false, ER2: false, ER3: false, ER4: false, ER5: false, ER6: false, Dreier: false, Vierer: false, Full: false, Kleine: false, Grobe: false, Kniffel: false, Chance: false }) // Passing score and disabling button function handleClick(event) { setTotalValues(prevState => { return { ...prevState, [event.target.name]: Score } }) setBtnOff(prevState => { return { ...prevState, [event.target.name]: true } }) } return ( <div className="score--inside"> <h3>1ER:</h3> <p>{totalValues.ER1}</p> <button disabled={btnOff.ER1 && true} name="ER1" onClick={handleClick}>Add score</button> </div> // ...MULTIPLE SCORE--INSIDE BOXES )