[SOLVED] react-pixi Stage options.backgroundColor don't change with state

react-pixi Stage options.backgroundColor don't change with state

State changes affect other React-Pixi Stage props, such as height or width. But, when I attempt to change the Stack options.backgroundColor, the backgroundColor does not change on state change.

Here's my code:

const edit = () => {
  const StageElement = {
    id: "ion-1212-2if",
    __typename: "CanvasStage",
    backgroundColor: "#CB6CE6",
    width: 500,
    height: 500,
  } as StageElementType;

  const [state, setState] = useState({
    stage: StageElement
  });
  const { stage } = state;


  // OnClick Canvas Elements
  const onClickCanvas = () => {

    setState({ ...state, stage: {...state, height: 400, width: 400, backgroundColor: "#38B6FF"}});
  };

  return (
    <Layout metaTags={metaTags}>
       <Box m="auto">
              <Stage
                width={stage.width}
                height={stage.height}
                raf={false}
                renderOnComponentChange={true}
                options={{
                  backgroundColor: getHexColorNumber(stage.backgroundColor),
                }}
                onClick={onClickCanvas}
              >
                <Graphics
                  draw={(g) => {
                    g.lineStyle(0);
                    g.beginFill(getHexColorNumber(stage.backgroundColor), 1);
                    g.drawCircle(300, 90, 60);
                    g.endFill();
                  }}
                />
              </Stage>
            </Box>
    </Layout>
  );
};

Solution