react-three, child doesn't rerender in one case, but does in the other

Question

I'm stuck with useState not rerendering the child component in one case.

This doesn't work

day is boolean here

const Parent = () => {
  const [day, setDay] = useState(true);

  const onHandle = () => {
    setDay((prevState) => !prevState);
  };
// omitted
}

const Child = ({ day }) => {
  const [colorMap] = useLoader(
    TextureLoader,
    [day ? EarthDayMap : EarthNightMap]
  );
// omitted

But this works

day is object here

const Parent = () => {
  const [day, setDay] = useState(EarthDayMap);

  const onHandle = () => {
    // toggling between day and night states
  };
// omitted
}

const Child = ({ day }) => {
  const [colorMap] = useLoader(
    TextureLoader,
    [day]
  );
// omitted

I made the code as simple as possible.

Answer 1

If you are switching between two state. You can use these

setDay(!day)

instead of your code.