我创建了五个可单击的按钮，用于显示按手风琴显示的问题和答案，用户可以切换显示和隐藏它们。数据来自五个数组，每个数组中都有另一个数组，其中包含问题和答案。每个按钮都映射为渲染，所有问题和答案的子数组都映射为手风琴。

问题是，例如当我打开按钮1的手风琴组中的第一个面板时，当我单击按钮2时，按钮2的手风琴组的第一个面板也处于打开状态。我只想打开按钮1的手风琴，而不要打开其他按钮的手风琴。我怎样才能做到这一点？请帮忙。

我尝试了componentDidUpdate并研究了prevProps和nextProps，但我认为方向不对。

import React,{useState} from 'react';
import { section2 } from '../data/faq';
import Section3 from './Section3';


export default function Section2() {

    const [show,setShow] = useState(null);
    const [chosen,setChosen] = useState(null);

    const showaccordion = (num) => {
        setShow(true);
        setChosen(num);
    }

    return (
        <div>
            <Container>
                {
                    section2 && section2.map(item => {
                        const num = item.index
                        return (
                            <Box key={item.index} 
                            classname={chosen === num ? 'large' : ''}
                            onClick={() => showaccordion(num)}>
                            <ItemText>{item.title}</ItemText></Box>
                        )
                    })
                }
            </Container>
            <accordionContainer>
                {
                    show ? (
                        section2[chosen] && section2[chosen].qa.map((qa,index) => {
                            return (
                                <Section3 key={index} 
                                    answer={qa.answer}
                                    question={qa.question}></Section3>
                            )
                        })
                    ) : null
                }
            </accordionContainer>
        </div>
    )
}

import React,{useState} from 'react';

export default function Section3(props) {

    const [toggle,setToggle] = useState(false);

    const toggleComponent = () => {
        setToggle(!toggle);
    }

    const createMarkup = (answer) => {
        return {__html: `${answer}`};
    }



    return (
        <div>
            <accordion
                onClick={() => toggleComponent()}>
                {props.question}
                {toggle ? <Arrow>&#9650;</Arrow> : <Arrow>&#9660;</Arrow>}
            </accordion>
            <ContentBox classname={`${toggle ? 'open' : 'close'}`}>
            <div dangerouslySetInnerHTML={createMarkup(props.answer)} />
            </ContentBox>
        </div>
    )
}

我希望现在只打开与按钮相关的手风琴项目，而不希望打开所有按钮中的所有其他手风琴项目。