pass useState from child to parent using functional components with typescript and react native

I have a table in my Header component configured like this :

const Header = ({ setHomeChange }) => {  const [tabIndex, setTabIndex] = React.useState(0);  const handleChange = (event: React.SyntheticEvent, newTabIndex: number) => {    setTabIndex(newTabIndex);  };  function tabProps(index: number) {    return {      id: `tab-${index}`,"aria-controls": `tab-${index}`,    };  }  return (<View><Box sx={{ width: "100%", height: "10%" }}><Box sx={{ borderBottom: 1, borderColor: "divider" }}><Tabs value={tabIndex} onChange={handleChange} aria-label="tabs"><Tab              label="Dashboard"              onClick={tabIndex === 1 ? setHomeChange : undefined}              {...tabProps(0)}            /><Tab              label="Crop Management"              onClick={tabIndex === 0 ? setHomeChange : undefined}              {...tabProps(1)}            /></Tabs></Box></Box></View>  );};

and my Home Component like this :

const Home = ({ navigation }) => {  const [home, setHome] = React.useState({    showCropManagement: false,    showDashboard: true,  });  const setHomeChange = () => {    setHome((prevState) => ({      ...prevState,      showCropManagement: !prevState.showCropManagement,      showDashboard: !prevState.showDashboard,    }));  };return (<ThemeProvider theme={rootMUITheme}><Header home={home} setHomeChange={setHomeChange} /><View>    {home.showCropManagement && <CropManagement navigation={navigation} />}    {home.showDashboard && <Dashboard navigation={navigation} />}</View><View><Text>Footer</Text></View></ThemeProvider>

);

when I click on a Tab i want to display the current component. I had all in one component and everything works correctly but when i tried to separate to header and home and try to pass the state between components i had a weird behavior and the components are not shown correctly. this is what I've tried so far can anyone see what i'm doing wrong.

Thank you