Javascript 在FAQ Accodion应用程序中使用React useState时出现问题

在前台导师网站(FAQ Accordion)上有一个挑战.我已经用Reaction解决了这个挑战.然而，我的代码不能正常工作.

除了在页面加载时第一次点击任何问题外，我必须双击每个问题才能切换它.我怀疑我的useState代码中有错误.

我创建了一个组件，该组件呈现问题/答案列表，并使用details个HTML标记显示它们.我只想使用详细信息标签来解决这个问题.

以下是我的组件代码:

import { Fragment, useState } from "react";
import minus from "./icon-minus.svg";
import plus from "./icon-plus.svg";

const Faq = ({ questionsObj }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedId, setSelectedId] = useState(null);
  function handleClick(id) {
    if (selectedId !== id) {
      setSelectedId(id);
    }
    if (selectedId === id) {
      setIsOpen(!isOpen);
    }
  }

  return (
    <main>
      {questionsObj.map((question, index) => (
        <Fragment key={question.id}>
          <details
            onClick={(e) => handleClick(question.id)}
            open={selectedId === question.id ? isOpen : null}
          >
            <summary>
              <span>{question.question}</span>

              <img
                src={
                  isOpen === false && selectedId === question.id
                    ? `${minus}`
                    : `${plus}`
                }
                alt=""
              />
            </summary>
            <p className="animate__animated animate__flipInX">
              {question.answer}
            </p>
          </details>
          {index !== questionsObj.length - 1 ? <hr /> : null}
        </Fragment>
      ))}
    </main>
  );
};

export default Faq;

我也认为我的代码不适合解决像手风琴这样的简单问题. 如果有人告诉我代码中的问题在哪里，我会很感激.

谢谢