如何使用useState在React-Bootstrap Accordion上保持状态？

import React, { useState } from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';

function MyAccordion() {
  const [activeKey, setActiveKey] = useState(null);
  
  // 其他组件代码...
}

function MyAccordion() {
  const [activeKey, setActiveKey] = useState(null);
  
  return (
    <Accordion activeKey={activeKey} onSelect={(key) => setActiveKey(key)}>
      <Card>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="link" eventKey="1">
            Panel 1
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey="1">
          <Card.Body>Panel 1 content</Card.Body>
        </Accordion.Collapse>
      </Card>
      
      <Card>
        <Card.Header>
          <Accordion.Toggle as={Button} variant="link" eventKey="2">
            Panel 2
          </Accordion.Toggle>
        </Card.Header>
        <Accordion.Collapse eventKey="2">
          <Card.Body>Panel 2 content</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
}

function App() {
  return (
    <div>
      {/* 其他组件代码... */}
      <MyAccordion />
      {/* 其他组件代码... */}
    </div>
  );
}