当我单击第二个手风琴时，如何关闭上一个打开的手风琴

Question

我是 React Bootstrap 的新手。我写了以下代码。

import React, { useState, useEffect } from "react";
import { Accordion, Card, Button } from "react-bootstrap";
import axios from "axios";

const Cards = () => {
  const [errorData, setErrorData] = useState([]);

  const fetchErrorData = async () => {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    console.log(response);

    setErrorData(response.data);
  };

  const [activeId, setActiveId] = useState("");

  function toggleActive(id) {
    console.log("id", id);
    console.log("activeId", activeId);
    if (activeId === id) {
      setActiveId(null);
    } else {
      setActiveId(id);
    }
  }

  const renderAccordion = (item, index) => {
    return (
      <Accordion key={index}>
        <Card>
          <div
            className={
              activeId === index.toString()
                ? "panel-wrap active-panel"
                : "panel-wrap"
            }
          >
            <div className="panel-header">
              <Accordion.Toggle
                as={Card.Header}
                eventKey={item}
                onClick={() => toggleActive(index.toString())}
                className="panel-toggle"
              >
                {item.name} <i>+</i>
              </Accordion.Toggle>
            </div>
          </div>
          <Accordion.Collapse eventKey={item}>
            <Card.Body>
              <ul>
                <li>{item.username}</li>
                <li>{item.email}</li>
              </ul>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    );
  };

  useEffect(() => {
    fetchErrorData();
  }, []);

  return (
    <div className="container-fluid">{errorData.map(renderAccordion)}</div>
  );
};

export default Cards;

所以我正在使用这个库

https://react-bootstrap.github.io/components/accordion/#basic-example

在我的示例中我找不到方法 - 如何始终关闭之前打开的手风琴选项卡。

例如，现在我可以连续打开三个，并且所有这些都会打开。