React Collapsible - 一次打开一个手风琴

Question

I am using the Collapsible npm package for React, and it solves most of my tasks, but there is no property that will allow only one active accordion to be opened at a time. I need logic that will close the previously opened accordion when the user clicks on a new one. Below is my code of parent and child components. Any help is welcome.

Child:

import Collapsible from 'react-collapsible';

const Accordion = ({
  open,
  trigger,
  triggerWhenOpen,
  children,
}) => {
  return (
    <Collapsible
      open={open}
      lazyRender={true}
      triggerTagName="div"
      trigger={trigger}
      triggerWhenOpen={triggerWhenOpen}
      className="mb-[30px]"
    >
      {children}
    </Collapsible>
  );
};

export default Accordion;

Parent:

 {/*Accordion mapping out */}
              {accordionArray.map((accName) => (
                <Accordion
                  open={accName.open}
                  trigger={accName.trigger}
                  triggerWhenOpen={accName.triggerWhenOpen}
                  key={accName + Math.Random()} //
                >
                  <AccordionContent
                    imgSrc={'/' + accName.imgSrc}
                    imgAlt={accName.imgAlt}
                  />
                </Accordion>
              ))}

Answer 1

You can open one collapsible at a time like this, this worked for me

import { useState } from 'react';
import Collapsible from 'react-collapsible';

function App() {
    const [count, setCount] = useState(0);

    return (
        <>
            <Collapsible trigger="Start here" open={count === 1} handleTriggerClick={() => setCount(1)}>
                <p>
                    This is the collapsible content. It can be any element or
                    React component you like.
                </p>
                <p>
                    It can even be another Collapsible component. Check out the
                    next section!
                </p>
            </Collapsible>
            <Collapsible trigger="Start here" open={count === 2} handleTriggerClick={() => setCount(2)}>
                <p>
                    This is the collapsible content. It can be any element or
                    React component you like.
                </p>
                <p>
                    It can even be another Collapsible component. Check out the
                    next section!
                </p>
            </Collapsible>
        </>
    );
}

export default App;