【React】子コンポーネントから親コンポーネントへStateの値を適切に変更したい

前提

ここに質問の内容を詳しく書いてください。
React + TypeScriptでwebサイトを作っています。

実現したいこと

アコーディオンを開閉するために、開閉をするためのstateを親コンポーネント内のuseStateで定義しているのですが、子コンポーネントでonClickをした時に変数が渡されている全てのアコーディオンが作動してしまい全てのアコーディオンが同時に開閉してしまうのですが、これを1つだけしかアコーディオンが開閉しない状態にするにはどうしてあげるのが良いのでしょうか。

理想は「クリックした要素だけアコーディオンが開き、それ以外の要素は開いていようが閉じていようがアコーディオンを閉じる」という挙動を実現したいです。

該当のソースコード

parentComponent
1const accordionItems = {
2  accordionList: [
3    {
4      title: "",
5      text: "",
6    },
7    {
8      title: "",
9      text: "",
10    },
11    {
12      title: "",
13      text: "",
14    },
15    {
16      title: "",
17      text: "",
18    },
19    {
20      title: "",
21      text: "",
22    },
23    {
24      title: "",
25      text: "",
26    },
27    {
28      title: "",
29      text: "",
30    },
31  ],
32};
33
34export function ParentComponent() {
35  return (
36    <div>
37      <Accordion accordionList={accordionItems.accordionList} />
38    </div>
39  );
40}

childComponent
1import classes from "./index.module.scss";
2import React from "react";
3import { useState, useCallback, createContext } from "react";
4import { AccordionQuestionData } from "src/components/layouts/common/accordionQuestionData";
5
6interface accordionData {
7  title: string;
8  text: string;
9}
10interface Props {
11  accordionList: accordionData[];
12}
13
14export const Accordion: React.VFC<Props> = React.memo(function AccordionItem(
15  props: Props
16) {
17
18  //accordionListをコピー
19  const accordionListArray = [...props.accordionList];
20
21  //分割点を決める
22  const half = Math.ceil(accordionListArray.length / 2);
23
24  //配列を左右に分ける
25  const leftList = accordionListArray.splice(0, half);
26  const rightList = accordionListArray.splice(-half);
27  //配列要素数が奇数だった場合、小数点になる
28  //splice()は小数点を使用すると繰り上がるので片方に偏ったデータが作れる
29
30  const [openIndex, setIndex] = useState(0);
31
32  return (
33    <div className={classes.position}>
34      <h3 className={classes.title}>よくある質問</h3>
35      <div className={classes.flexBox}>
36        <div className={classes.flex}>
37          {leftList.map((item, index) => {
38            return (
39              <AccordionQuestionData
40              key={index}
41              title={item.title}
42              text={item.text}
43              openIndex={openIndex}
44              setIndex={setIndex}
45              />
46            );
47          })}
48        </div>
49        <div className={classes.flex}>
50          {rightList.map((item, index) => {
51            return (
52              <AccordionQuestionData
53              key={(accordionListArray.length % 2 == 0) ? index + leftList.length : index + (leftList.length + 1) * 0.5}
54              title={item.title}
55              text={item.text}
56              openIndex={openIndex}
57              setIndex={setIndex}
58              />
59            )
60          })}
61        </div>
62      </div>
63    </div>
64  );
65});

grandChildComponent
1import classes from "./index.module.scss";
2import React, { useContext } from "react";
3import { useState, useCallback } from "react";
4
5interface Props {
6  key: number;
7  title: string;
8  text: string;
9  openIndex: number
10  setIndex: (prev: any) => void;
11}
12
13export const AccordionQuestionData: React.VFC<Props> = React.memo(
14  function AccordionQuestion(props: Props) {
15    console.log(props.key)
16    //ここで値を変更させて同一の変数を扱いつつ、それぞれの範囲内でクリック判定を扱えるようにする
17
18    const changeIndex = useCallback((index: number) => {
19      props.setIndex((prev: any) => {
20        return prev === index ? -1 : index;
21      })
22    }, [props])
23
24
25    return (
26      <div className={classes.accordionWrapper}>
27        <div
28          className={`${classes.accordionTitle} ${
29            props.openIndex === props.key ? classes.open : ""
30          }`}
31          onClick={(e) => {
32            e.preventDefault();
33            changeIndex(props.key);
34            //ここで開閉イベントを行う
35          }}
36        >
37          <p>{props.title}</p>
38        </div>
39        <div
40          className={`${classes.accordionItem} ${
41            props.openIndex === props.key ? "" : classes.collapsed
42          }`}
43        >
44          <div className={classes.accordionContent}>
45            <p
46              className={classes.accordionText}
47              dangerouslySetInnerHTML={{
48                __html: props.text,
49              }}
50            ></p>
51          </div>
52        </div>
53      </div>
54    );
55  }
56);
57