Передача реквизита / состояния между двумя функциональными дочерними компонентами в React?

Я много смотрел в Google о том, как передавать реквизиты между функциональными компонентами, но, похоже, там очень мало информации (либо это, либо я не знаю, какие ключевые слова вводить в Google).

Мне не нужны redux или данные, хранящиеся глобально, я просто хочу передать объект JSON, хранящийся в хуке, из одного файла компонента в другой.

У меня есть три файла, один из которых является родительским, а два других - дочерними, я хочу передать данные между дочерними файлами.

Паэрент

import React, { useState } from "react";
import ShoppingPageOne from "./ShoppingPageOne";
import ShoppingPageTwo from "./ShoppingPageSecond";

function ShoppingPageContainer() {

  const [pageone_Open, setPageone_Open] = useState(true);
  const [pagetwo_Open, setPagetwo_Open] = useState(false);


  const page_showHandler = () => {
    setPageone_Open(!pageone_Open);
    setPagetwo_Open(!pagetwo_Open);
  };

  return (
    <div className="Shopping_Container">
      <div className="Shopping_Box">
        <h2>Online food shop</h2>
        <div className="Shopping_Page_Container">
          <ShoppingPageOne showOne={pageone_Open} next_ClickHandler={page_showHandler} />
          <ShoppingPageTwo showTwo={pagetwo_Open} Reset_Data={page_showHandler} />
        </div>
      </div>
    </div>
  );
}

export default ShoppingPageContainer;

Первый ребенок:

import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageOne = (props) => {

  //element displays
  const [pageone_show, setPageone_show] = useState("pageOne");

  //stores quantities of items as JSON objects
  const [Quantities, setQuantities] = useState({});
  const [QuantiesProps, setQuantitiesProps] = useState(null)


  useEffect(() => {
    //sets info text using Json
    if (props.showOne) {
      setPageone_show("pageOne");
    } else {
      setPageone_show("pageOne hide");
    }
  }, [props.showOne]);


  return (
    <div className={"Shopping_Content " + pageone_show}>
      {Data.map((Ingredients) => {

        //updates Quanties Hook
        const handleChange = (event) => {

          setQuantities({
            ...Quantities,
            [Ingredients.Name]: {
              ...(Quantities[Ingredients.Name] ?? {}),
              quantities: event.target.value
            }
          });
        };

        return (<div className="Shopping_input" key={Ingredients.Name}>
          <p>{Ingredients.Name} £{Ingredients.Price}</p>
          <input onChange={handleChange.bind(this)} min="0" type="number"></input>
        </div>)
      })}
      <div className="Shopping_Buttons">
        <p onClick={props.next_ClickHandler}>Buy Now!</p>
      </div>

    </div>
  );
};

export default ShoppingPageOne;

Второй ребенок

import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageSecond = (props) => {
  //element displays
  const [pagetwo_show, setPagetwo_show] = useState("pageTwo hide");

  useEffect(() => {
    //resets info text
    if (props.showTwo) {
      setPagetwo_show("pageTwo");
    } else {
      setPagetwo_show("pageTwo hide");
    }


  }, [props.showTwo]);




  return (
    <div className={"Shopping_Content " + pagetwo_show}>

      <div className="Shopping_Buttons">
        <p onClick={props.Reset_Data}>Shop Again</p>
      </div>

    </div>
  );
};

export default ShoppingPageSecond;import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageSecond = (props) => {
  //element displays
  const [pagetwo_show, setPagetwo_show] = useState("pageTwo hide");

  useEffect(() => {
    //resets info text
    if (props.showTwo) {
      setPagetwo_show("pageTwo");
    } else {
      setPagetwo_show("pageTwo hide");
    }


  }, [props.showTwo]);




  return (
    <div className={"Shopping_Content " + pagetwo_show}>

      <div className="Shopping_Buttons">
        <p onClick={props.Reset_Data}>Shop Again</p>
      </div>

    </div>
  );
};

export default ShoppingPageSecond;

Я просто хочу передать состояние, содержащееся в хуке Quantities, из первого ребенка в второго ребенка при покупке сейчас! кнопка нажата. Как лучше всего это сделать?