I have a webpage with multiple forms. Here's a bare minimum example of the structure:

```js
export default function Example() {
  const [previousFormFetchedFromWeb, setPreviousFormFetchedFromWeb] = useState(
    {}
  );
  const [formA, setFormA] = useState({});
  const [formB, setFormB] = useState({});
  const router = useRouter();

  useEffect(() => {
    fetchFormFromWeb(router.query.id).then((previousForm) => {
      console.log("fetched info from web");
      setPreviousFormFetchedFromWeb(previousForm);
      setFormA(previousForm.formA);
      setFormB(previousForm.formB);
    });
  },[router.isReady]);

  return (
    <>
      <FormA form={formA} />
      <FormB form={formB} />
    </>
  );
}

function FormA({ form }) {
  return (
    <input
      type="text"
      name="field1"
      id="field1"
      value={formA.field1}
      onChange={(e) => {
        setFormA(e.target.value);
      }}
    />
  );
}
function FormB({ form }) {
  return (
    <input
      type="text"
      name="field2"
      id="field2"
      value={formB.field2}
      onChange={(e) => {
        setFormB(e.target.value);
      }}
    />
  );
}

```

I think this should be the encapsulated logic of my form page. The problem is that when the onChange event is called for a field of any form, all forms get re-rendered. I assumed that setState should re-render only the components with the affected dependency change. Am I missing something?