Simplemente no parece que ninguna de las siguientes soluciones esté funcionando porque la primera adición de un COLOR no aparece en el mismo renderizado que la acción del segundo gancho.

Definitivamente hay una solución aquí con el renderizado.

 const TestArrayPush = (e) => { const newColor = e setColorArray(oldArray => [...oldArray, newColor]) setFilteredArray( colorArray.filter(colors => colors == newColor) ) } <div> <input type="checkbox" value="White" name="checkbox" onClick={(e) => TestArrayPush(e.target.value)} /> White <input type="checkbox" value="Black" name="checkbox" onClick={(e) => TestArrayPush(e.target.value)} /> Black </div>