我正在嘗試在 React 中制作折疊/手風琴。但問題是，它不會觸發我想要切換的特定內容，即當我點擊標題時，所有段落標簽都達到了最大高度。我知道這段代碼沒有錯誤，但我也不知道如何觸發特定的段落標簽。這是我的反應代碼：import React, {useState} from 'react'import style from './stylecss.module.css'import AnimateHeight from 'react-animate-height'import cx from 'classname'import globalStyles from '../Assets/global-styles/bootstrap.module.css'function Collapse() {  const item = [    {      heading : "HEADING 1",      para : "DATA 1"    },    {      heading : "HEADING 2",      para : "DATA 2"    }  ]    const [state, setState] = useState("0")    function displayPara (){    console.log(itemPlace)    if(state==0)      setState("auto")    else      setState(0)  }  const itemPlace = item.map(({heading, para}) => {    return (    <div>      <h5 onClick={ e => displayPara()}>        {heading}      </h5>      <AnimateHeight duration={ 500 } height={ `${state}` }>        <p>{para}</p>      </AnimateHeight>    </div>    )  })  return (    <div className={style.AboutPage}>      {itemPlace}    </div>  )}export default Collapse這是 CSS 代碼.AboutPage {    margin-top : 40px;    padding : 30px 6% 10px 6%;    background-color: rgb(250, 250, 250);    display: flex;    flex-direction: column;    text-align: left;}.paraDiv {    color : red !important;    width: 100%;    height : 100%;    background-color: chartreuse;    transition: max-height 0.5s;}.paraDiv.is-active {    height: 300px;}我不希望使用內置或預定義的折疊組件。