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

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

function CustomAccordion() {
  // 初始化状态，假设Accordion有三个项
  const [activeKey, setActiveKey] = useState('0');

  return (
    <Accordion activeKey={activeKey} onSelect={setActiveKey}>
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="0">
          Click me!
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>Hello! I'm the content for the first item.</Card.Body>
        </Accordion.Collapse>
      </Card>
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="1">
          Click me!
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="1">
          <Card.Body>Hello! I'm the content for the second item.</Card.Body>
        </Accordion.Collapse>
      </Card>
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="2">
          Click me!
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="2">
          <Card.Body>Hello! I'm the content for the third item.</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
}

export default CustomAccordion;

// 使用localStorage持久化状态的示例
const [activeKey, setActiveKey] = useState(() => {
  const savedKey = localStorage.getItem('accordionActiveKey');
  return savedKey ? JSON.parse(savedKey) : '0';
});

// 在setActiveKey时更新localStorage
const handleSelect = (key) => {
  setActiveKey(key);
  localStorage.setItem('accordionActiveKey', JSON.stringify(key));
};