Hey, I'm pretty new to nextjs and I am wondering what is the correct way to handle such case

On my root page I want to have two components <Picker> and <Displayer> Picker shows data fetched from external API and allows users to click on some fields, then there should be a button somewhere "Pick" and based on what user picked some data should be fetched from external API and displayed by the <Displayer> component. I was wondering how can I pass the correct data to the <Displayer> without managing all the state in the root level component and using useState to keep which fields got picked. What would be the best way to handle such case?

  const data = await getData();
  return (
    <div>
      <Picker data={data}/>
      <Displayer/>
    </div>
  )