Reactで子コンポーネントの変更を親コンポーネントに渡したい

reactでECサイトのポートフォリオを作成していて、商品が10個以上ある時に1ページに商品を10個表示するようなアプリケーションを作成しています。
最初に1~~10番目までの商品を表示して、次ページボタンを押したら11~~20番目までの商品を表示して...と言った機能を持つページボタンコンポーネントを作成しました。
このボタンがクリックされたら親コンポーネントに情報を渡して表示商品を別のものにするといった処理を行いたいのですが、その方法を教えていただきたいです。

下記がページボタンコンポーネントです。

react
1export default function PageButton(props){
2  const [count, setCount] = useState(0);
3  let countNext;
4  //1ページ進むボタン
5  async function countInc(){
6    if(count*10+10 < props.gameDoc.length){
7      setCount(count+1);
8    }
9  }
10  //1ページ戻るボタン
11  async function countDec(){
12    if(count>0){
13      setCount(count-1)
14    }
15  }
16  //表示作品数が作品全体数を超えないようにするための制御
17  if(count*10+10 < props.gameDoc.length){
18    countNext = count*10+10;
19  } else {
20    countNext = props.gameDoc.length;
21  }
22
23  return(
24    <div className="pageButton" style={{display:"flex"}}>
25      <ArrowBackIosIcon onClick={countDec} />
26      <div>{count+1}ページ目</div>
27      <ArrowForwardIosIcon onClick={countInc} />
28      <div>
29        {count*10+1} ~ {countNext} / {props.gameDoc.length}作品中
30      </div>
31    </div>
32  )
33}

以下のコメントアウトのようにsliceメソッドで表示個数を10個に制限したいのですが、子コンポーネントからcountの情報が渡されないため表示個数を制限することができませんでした。

ract
1export default function GameInfo(props){
2  return(
3    <div>
4      <ul>
5        <div className="game-container">
6        {/* {props.gameDoc.slice(count*10, count*10+10).map((doc, index) =>  */}
7        {props.gameDoc.map((doc, index) =>
8          <li className="game-image" key={index} style={{marginBottom:"30px", display:"flex"}}>
9            <img src={doc.photo} alt="not image" height="220px" width="330px"/>
10            <div className="game-info" style={{marginLeft:"30px"}}>
11              <h1>{doc.name}</h1>
12              <p>price: ¥{doc.price}</p>
13            </div>
14          </li>)
15        }
16        </div>
17      </ul>
18      {/* ページボタン */}
19      <PageButton gameDoc={props.gameDoc}/>
20    </div>
21  )
22}