I have a react project name parent which is running on port 3000 and another project name child which is running on port 3001. In the child app, I have a counter button which I rendered it inside the parent app using an iframe. The counter is working fine but the value of the child app is not updating. However, I am calling this the parent project.

Heare is my code

parents.js

 return (
    <div className="App">
      This is Parent app

      <Iframe url="http://localhost:3001/"
        width="450px"
        height="450px"
        id="myId"
        className="childApp"
        />
    </div>
  );


Child.js

  const [number, setNumber] = useState(0)

  return (
    <div className="App">
      This is Child app
      {number}
      <button onClick={() => setNumber(number + 1)}>Click me</button>
    </div>
  );