It just doesnt seem like any of the below solutions are working because the first addition of a COLOR doesnt show up on the same render as the 2nd Hook action .

There's definitely a solution to be had here with rerendering.

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>