如何从react中的子组件折叠折叠面板

import React, { useState } from 'react';

const Accordion = ({ title, content, index, currentIndex, onToggle }) => {
  const isExpanded = index === currentIndex;

  return (
    <div>
      <div onClick={() => onToggle(index)}>
        <h3>{title}</h3>
      </div>
      {isExpanded && <div>{content}</div>}
    </div>
  );
};

const ParentComponent = () => {
  const [currentIndex, setCurrentIndex] = useState(null);

  const panels = [
    {
      title: 'Panel 1',
      content: 'Content 1',
    },
    {
      title: 'Panel 2',
      content: 'Content 2',
    },
    {
      title: 'Panel 3',
      content: 'Content 3',
    },
  ];

  const togglePanel = (index) => {
    setCurrentIndex((prevIndex) => (prevIndex === index ? null : index));
  };

  return (
    <div>
      {panels.map((panel, index) => (
        <Accordion
          key={index}
          title={panel.title}
          content={panel.content}
          index={index}
          currentIndex={currentIndex}
          onToggle={togglePanel}
        />
      ))}
    </div>
  );
};

export default ParentComponent;