I have a page that is compiled with 3 form components I want the parent page to have the state and pass through the state to child components then I want to mutate the state in the forms and then use them in the parent component I currently doing it in a way similar to as shown below but I am not sure if this is the best approach to handle state in child components is there a better way ? Also I want to memoize the form components with react.memo to prevent them from re-rendering unless the props have changed. Any help would be much appreciated

const [form1, setform1] = useState<boolean>(false);
const [Form2, setform2] = useState<string>("");
const [form3, setForm3] = useState({});
<form1 form1={form1} setfrom1={setform1} otherProps={otherProps} />
<form2 form2={form2} setfrom2={setform2} otherProps={otherProps} />
<form3 form3={form3} setfrom1={setform3} otherProps={otherProps}/>