How to pass state to another component?

Question

React

I have a Header and DarkTheme component, in the Header there is a switch (Switch) that should change the state darkMode in DarkTheme. How can i do this?

header

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1
        },
        menuButton: {
            marginRight: theme.spacing(2),
            color: '#fff'
        },
        title: {
            flexGrow: 1,
            color: '#fff',
            textAlign: 'center'
        },
        header: {
            color: '#fff',
            background: '#9CC525'
        }
    }),
);

export const Header = (props: any) => {

    const classes = useStyles();

    const [darkMode, setDarkMode] = useState(false);
    
    return (
        <div>
            <div>
                <AppBar position="static" >
                    <Toolbar className={classes.header}>
                        <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                            <MenuIcon />
                        </IconButton>
                        <img src={logo} alt='logo' />
                        <Typography variant="h2" className={classes.title}>
                            Особистий кабінет
                        </Typography>
                        <Switch color="default" checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
                        <Button color="inherit">
                            Вход
                        </Button>
                    </Toolbar>
                </AppBar>

            </div>
        </div >
    )
};

dark theme

export default function DarkTheme({ children }: any) {

    const [darkMode, setDarkMode] = useState(false);
    
    const lightTheme = createMuiTheme({});

    const darkTheme = createMuiTheme({
        palette: {
            type: 'dark'
        }
    });

    return (
        <div>
            <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
                <Paper square elevation={0} style={{ height: "100vh" }}>
                    <Switch color="default" checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
                    {children}
                </Paper>
            </ThemeProvider>
        </div>
    )
}