You have to create separate component for each div with changeable colour. This way each component will have its own independently managed state. In your example, you share same color state as the rest.

BoxComponent

class BoxComponent extends React.Component {
    state = {
        color: "blue",
    };

    onChange = () => {
        this.setState({ color: "red" });
    };

    render() {
        return (
            <div
                style={{ backgroundColor: this.state.color, width: 20, height: 20, opacity: "50%" }}
                onClick={this.onChange}
            />
        );
    }
}

MainComponent

class Main extends React.PureComponent {
    render() {
        return (
            <Box sx={SX.root}>
                <Box sx={SX.page}>
                    <Box sx={SX.shapeContainer}>
                        <BoxComponent />
                        <BoxComponent />
                    </Box>
                    <MathGrid sx={SX.math1} />
                </Box>

                <Box sx={SX.header} />
                <Box sx={SX.footer} />
            </Box>
        );
    }
}

Both divs are using the “color” state value. You’ll need to use two separate pieces of state to manage the color of these two divs independently.

You’ll also need to either add another onChange handler, or modify the existing one to accept a color as an argument.

You are using the same state for both boxes so when you change your state - its going to change across the whole component. You will need to make separate states for each component. or create a separate component for the box

<div
                        style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}}
                        onClick={this.onChange}
                    />
                    <div
                        style={{backgroundColor: this.state.color, width: 20, height: 20, opacity: '50%'}}
                        onClick={this.onChange}
                    />