Reactjs如何在map函数中使用ref？

我正在通过数组进行映射，并为每个项目显示一个带有文本的按钮。假设我希望单击按钮时，下面的文本会将其颜色更改为红色。如何定位按钮的同级按钮？我尝试使用 ref 但由于它是映射的 jsx，因此只会声明最后一个 ref 元素。

这是我的代码：

class Exams extends React.Component {
    constructor(props) {
        super()
        this.accordionContent = null;
    }
    state = {
        examsNames: null, // fetched from a server
    }
    accordionToggle = () => {
        this.accordionContent.style.color = 'red'
    }
    render() {
        return (
            <div className="container">
                {this.state.examsNames && this.state.examsNames.map((inst, key) => (
                    <React.Fragment key={key}>
                        <button onClick={this.accordionToggle} className="inst-link"></button>
                        <div ref={accordionContent => this.accordionContent = accordionContent} className="accordionContent">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.</p>
                        </div>    
                    </React.Fragment>
                ))}
            </div>
        )
    }
}


export default Exams;

正如所解释的，结果是每次单击按钮时，附加到最后一个按钮的段落都将成为目标。

提前致谢

初始化this.accordionContent作为数组

constructor(props) {
    super()
    this.accordionContent =[];
}

并设置ref像这样

<div ref={accordionContent => this.accordionContent[key] = accordionContent} className="accordionContent">