I want to know I have one parent component and two child components and these child components are separated according to the user role. I have passed the parent state in these child components. In the beginning, both child components have the same state value, but if I update the state value in one child component, it will not update the state value in another component why. Here is an example code.

import React, { useEffect, useState } from "react";
import Demo1 from "./Demo1";
import Demo2 from "./Demo2";

const Demo = () => {
 
  const [staVal, setStaVal] = useState("hi");

  console.log(staVal);
  
  const user = JSON.parse(localStorage.getItem("auth"));

  return (
    <div>
      {user.role === "user" ? (
        <Demo1 staVal={staVal} handler={() => setStaVal("google")} />
      ) : (
        <Demo2 staVal={staVal} />
      )}
    </div>
  );
};

export default Demo;

Demo1 component:

import React from "react";

const Demo1 = ({ staVal, setStaVal, handler }) => {
  return (
    <>
      <div>demo1:{staVal}</div>
      <button onClick={handler}>clik</button>
    </>
  );
};

export default Demo1;

Demo 2 component:

import React from "react";

const Demo2 = ({ staVal }) => {
  return <div>demo2:{staVal}</div>;
};

export default Demo2;