无法在单个 div 上使用 React.portal 呈现不同的组件

如何解决无法在单个 div 上使用 React.portal 呈现不同的组件

我有一个“section”组件，它呈现我想在点击时折叠的所有项目， 应该在折叠项目内的内容在不同的组件中， 我尝试渲染这些不同组件的方式（点击部分）是通过 React.createportal。 但是出了点问题，我可以从单击的部分中获取正确的名称，但是当我将它插入到 div 的“id”属性中时，什么也没有发生，我得到一个空白的 div，在单击时折叠。 部分代码：

{sections.map((section,index) => {
            return (
                <div className="container" onClick={handleClick} key={index}>
                  <Icon icon= {section.icon}/>
                  <SectionTitle content={section.content}/>
                  {isClicked && section.name === sectionName && <div id={sectionName}></div>}
                </div>
            )
        })}

和内容组件代码：

export default function About() {
return ReactDOM.createPortal(
    <div className="about-section">
      <p>
          About works!
      </p>  
    </div>,document.getElementById("about")
)

}

如您所见，“about”组件期望 div 的 id 值为“about”，而这正是单击“about”部分时发生的情况，所以我不知道出了什么问题，请帮忙？