Is it needful to pass a state as props from the parent into the child component or to just re-establish the hook within the child component scope?

So, After having learned the basic to intermediate concepts of React.js, I decided to implement some of this knowledge into the development of quite a number of my websites. I then started facing some difficulties when it came to the points of passing data from parent(s) to child(ren) component(s), between siblings, and most importantly, from child(ren) to parent(s).

Here's part of the code for the parent component (App.jsx):

function App() {
    const [theme, setTheme] = useState("light");

    const toggleTheme = () => {
        setTheme((curr) => (curr === "light" ? "dark" : "light"));
    };

    return (
        <>
            <ThemeContext.Provider value={{ theme, toggleTheme }}>
                <div id={theme}>
                    <Header theme={theme} setTheme={setTheme} />
                </div>
            </ThemeContext.Provider>
        </>
    );
}

export default App;

And here's the code for the child component (Header.jsx):

const Header = (props) => {
    const toggleTheme = () => {
        props.setTheme((curr) => (curr === "light" ? "dark" : "light"));
    };

    return (
        <header>
            <div className="menu_bar">
                <div className="top_right_container">
                    <ul>
                        <li className="toggle_icon_wrap">
                            <ReactSwitch
                                onChange={toggleTheme}
                                checked={props.theme === "dark"}
                            />
                        </li>
                    </ul>
                </div>
              </div>
            </div>
        </header>
    );
};

export default Header;

Please, I'll like to get suggestions from anyone. Thanks!