I am lifting the state from componentA to parent and made the componentA to run as SSR: false using dynamic as the component is not working on SSR but the state is returning duplicate value in the parent. I have cross-checked by making it run on a react app. Their it is working perfectly fine. I guess the problem is with making the componentA to SSR:false how can I rectify the problem. As shown in the picture I am getting duplicate state when I console.log(solutesateA) in parent

function ChildA({ setsolutestateA}) {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateA}
        />
      </div>
    );
  }
  
  const childB = ({{ setsolutestateB}}) => {
    return (
      <div>
        <Jsme
          height="300px"
          width="400px"
          options="oldlook,star"
          onChange={setsolutestateB}
        />
      </div>
    );
  };
  
  
  function App() {
    const [solutestateA, setsolutestateA] = useState("");
    const [solutestateB, setsolutestateB] = useState("");

    return (
      <div className="App">
        <ChildA {...{setsolutestateA}}/>
        <ChildB {...{setsolutestateB}}/>
  
        <div>{solutestateA}</div>
        <div>{solutestateB}</div>
      </div>
    );
  }

const Editor = dynamic(() => import("../../components/editor"), {
  ssr: false,
});