我正在制作一个简单的Reactjs accordion应用程序，其中完成了每个单独项的折叠和展开。

要求：

一个简单的要求是，我需要根据点击将标题的文本切换为Expand或Shrink。
如果我们单击任何一项，则会显示内容，在这种情况下，文本将更改为“收缩”，因为折叠式面板打开，因此“收缩”标题用于关闭折叠式面板。

完整的工作示例：

在上面的示例中，我使用了以下代码来更改文本，

** accordion .js**

import React, { useState } from "react";
import Text from "./text";
import Heading from "./heading";
import getAccordion from "./GetAccordion";

const Accordion = getAccordion(1);

const accordionData = [
  {
    id: 1,
    content: "This is a first content"
  },
  {
    id: 2,
    content: "This is a second content"
  },
  {
    id: 3,
    content: "This is a third content"
  }
];

const NormalAccordion = () => {
  const [toggleValue, setToggleValue] = useState(-1);

  const toggleHandler = (index) => {
    setToggleValue(index);
  };

  return (
    <div>
      {accordionData.map((item, index) => (
        <Accordion>
          <Heading>
            <div
              style={{ padding: "10px", cursor: "pointer" }}
              className="heading"
              onClick={() => toggleHandler(index)}
            >
              {toggleValue !== index ? `Expand` : `Shrink`}
            </div>
          </Heading>
          <Text>{item.content}</Text>
        </Accordion>
      ))}
    </div>
  );
};

export default NormalAccordion;

这一行{toggleValue !== index ?Expand:Shrink}更改了文本一次，但之后在标题上进一步切换（扩展/收缩）时不会进行任何更改。
请帮助我实现基于相应的点击在展开和收缩之间切换文本的结果。