I made an application where I can visualize a graph. All nodes in the graph are blue, and I have a component that is basically a checkbox. The user can click it, and I change a state. This state change alters the color of some nodes using a logic. After that, I change the graph to another one and reset this state because I need all nodes in the graph to be blue. That works well, but the problem is my checkboxes remain checked. Basically, I need to uncheck them.

My component

import React from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";


const CheckboxLabels = ({label, onChangeFunc, style, checked }) => {
  return (
    <FormGroup 
      style={style}
    >
      <FormControlLabel
        control={
          <Checkbox
            defaultChecked={false}
            checked={true ? checked : false}
            color="secondary"
          />
        }
        label={label}
        onChange={onChangeFunc}
      />
    </FormGroup>
  );
}

export { CheckboxLabels }

Where i used it

{
   cyGraph.code &&
   <CheckboxLabels
      key={`change-highlight-${showHighlight}`} 
      label={"Highlight overlapping proteins"}
      onChangeFunc={
        (event) => {
            setShowHighlight(event.target.checked)
        }
      }
      style={
        {
            position: "absolute",
            margin: "10px",
            zIndex: "1000",
            top: "15px",
            left: showMenu ? "73%" : "53%",
        }
      }
      checked={showHighlight}
    />
}

useEffect where i change the graph

React.useEffect(() => {
        if (cyGraph.code === "") {
            return;
        }
        setShowWeight(false);
        setShowHighlight(false);

        let nodes = cyGraph.nodes;
        let proteins = [];
        nodes.forEach(
            (node) => {
                if (node.data.type === "protein") {
                    proteins.push({
                        id: node.data.id,
                        name: node.data.label,
                        description: "Automatic node created from PPI file",
                        url_info: `www.ebi.ac.uk/proteins/api/proteins/${node.data.label}`,
                    });
                }
            }
        );
        setComplexProteinList(proteins);
        setShowComplexList(true);
        setLayout(initiallayout);
        if (goaFileName !== "") {
            getEnrichmentData(cyGraph.code)
        }
    }, [cyGraph]);

if necessary the useEffect of that state

React.useEffect(() => {
        if (cyEvent === "") {
            return;
        }
        if (showHighlight) {
            let nodes = cyEvent.nodes()
            nodes.forEach((node) => {
                if (node.data().overlapping === true) {
                    node.style(
                        "background-color", "#C65151");
                    node.style(
                        "width", 50);
                    node.style(
                        "height", 50);
                    node.style(
                        "text-outline-color", "#C65151");
                    node.style(
                        "text-outline-width", 8);
                }
            });
        } else {
            let nodes = cyEvent.nodes()
            nodes.forEach((node) => {
                if (node.data().overlapping === true) {
                    node.style(
                        "background-color", "#618CB3");
                    node.style(
                        "width", 30);
                    node.style(
                        "height", 30);
                    node.style(
                        "text-outline-color", "#618CB3");
                    node.style(
                        "text-outline-width", 2);
                }
            });
        }
    }, [showHighlight]);

I tried everything, i used “key” prop, internal state in the component. Also i use to React version 18.2.0