在reactJS中使用带钩子的antD <Collapse>的最好方法是什么？

import React from 'react';
import { Collapse } from 'antd';

const MyComponent = () => {
  return (
    <Collapse>
      {/* 在这里添加折叠面板 */}
    </Collapse>
  );
}

const MyComponent = () => {
  return (
    <Collapse>
      <Collapse.Panel key="panel1" header="面板1">
        {/* 面板1的内容 */}
      </Collapse.Panel>
      <Collapse.Panel key="panel2" header="面板2">
        {/* 面板2的内容 */}
      </Collapse.Panel>
    </Collapse>
  );
}

const MyComponent = () => {
  const handlePanelExpand = () => {
    // 在面板展开时执行的函数
  }

  return (
    <Collapse>
      <Collapse.Panel key="panel1" header="面板1" onExpand={handlePanelExpand}>
        {/* 面板1的内容 */}
      </Collapse.Panel>
      <Collapse.Panel key="panel2" header="面板2">
        {/* 面板2的内容 */}
      </Collapse.Panel>
    </Collapse>
  );
}