react accordion组件语义上正确的html

<div class="accordion">
  <div class="collapse-item">
    <h2 class="title">折叠项1</h2>
    <div class="content">
      <!-- 折叠项1的内容 -->
    </div>
  </div>
  <div class="collapse-item">
    <h2 class="title">折叠项2</h2>
    <div class="content">
      <!-- 折叠项2的内容 -->
    </div>
  </div>
  <!-- 更多折叠项... -->
</div>

import React, { useState } from 'react';

const Accordion = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const handleItemClick = (index) => {
    setActiveIndex(index === activeIndex ? null : index);
  };

  return (
    <div className="accordion">
      {items.map((item, index) => (
        <div className={`collapse-item ${index === activeIndex ? 'active' : ''}`} key={index}>
          <h2 className="title" onClick={() => handleItemClick(index)}>
            {item.title}
          </h2>
          <div className="content">
            {item.content}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Accordion;