I am creating Accodion which will have multiple items with TITLE and BODY.

When a title is clicked, I want the setShow to true. But when Item A is true, I don't want item B to be true at same time. I will be fetching those data from the Server and I don't know how my items i will have in the future.

const Accordion = ({ title, text }) => {
  const [show, setShow] = React.useState(false);
  return (
    <>
      <div className="accordion-wrapper">
        <div
          onClick={() => setShow(!show)}
          className="accordion-title cursor-pointer flex flex-row flex-1 justify-between items-center"
        >
          <div className="title-text">
            <h2>{title}</h2>
          </div>
          <div className="title-icon"></div>
        </div>
        <div className="accordion-content">{text}</div>
      </div>
    </>
  );
};

export default Accordion;