如何通过子组件的形式正确更改父母的状态?

我正在尝试在提交表单后从子组件更新父组件上共享值的状态:

父母

  const [search, setSearch] = useState("default");

  function handleSubmitted(n) {
    setSearch(n);
    console.log(search);                                //Doesn't update, and value lost after refresh
  }

  return (
    <>
      <Switch>
        <Route exact path="/">
          <Landing onSubmit={handleSubmitted} />        //Child responsible to update state
        </Route>
        <Route path="/add">
          <Add />
        </Route>
        <Route path="/menus">
          <RestaurantList search={search} />            //Receives updated state after a redirect
        </Route>
      </Switch>
    </>
  );

儿童

export default function Landing(props) {
  return (
    <>
      <section className="center fullpage" id="landing">
        <div className="landing__contents">
          <h1>DineIn</h1>
          <div className="search">
            <form onSubmit={props.onSubmit} >                   //Call function on parent
              <input type="text" placeholder="D Spot Cafe" />
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

I'm trying to get <RestaurantList /> to receive the search value typed by the user in <Landing /> to perform the actual search query functions, but the states are not changing.

我的结构完全错误吗?