Reactjs 折叠并重新打开react 手风琴将重置内部状态

我正在使用一个ReactJS Accordion组件，在该组件中，我在每个部分中呈现表单.但是，当我折叠然后展开折叠按钮时，所有表单输入都重置为其默认值.这似乎是由isOpen状态更改时的重新渲染触发的.如何在保留手风琴功能的同时保留表单状态？

我已经在父文件中定义了表单状态，其中使用了<Accordion {...props}/>，并将setState函数作为props 发送.在Form组件内部调用setState

Accordioin组分

export default function Accordian({
  title,
  content,
  children,
  headingPrefixIcon,
  headingSuffixIcon,
  fontSize = 'medium',
  textSize = 'lg',
  customizableClassProps = 'border-t',
  showToggle = false,
  showBadge,
  badgeText,
  isCollapsible = true,
  taggleEnable,
  setTaggleEnable,
  useAccordianStateForToggle = false
}) {
  const [isOpen, setIsOpen] = useState(true);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  }

  const [enabled, setEnabled] = useState(false);

  return (
    <div className='border border-gray-200 rounded-base mb-2 w-full'>
      <div
        className='flex justify-between items-center p-3 cursor-pointer bg-[#F9F8FD] rounded-base select-none'
        onClick={toggleAccordion}
      >
        <div className='flex items-center gap-2'>
          <div>{headingPrefixIcon}</div>
          <h2
            className={`text-${textSize} font-${fontSize} text-app-description`}
          >
            {title}
          </h2>
          <div>{headingSuffixIcon}</div>
        </div>
        {isCollapsible ?
          !showToggle ? (
            isOpen ? (
              <ChevronUpIcon className='w-6 h-6' />
            ) : (
              <ChevronDownIcon className='w-6 h-6' />
            )
          ) : (<FlyyToggle enabled={!useAccordianStateForToggle ? taggleEnable : isOpen} setEnabled={!useAccordianStateForToggle ? setTaggleEnable : setIsOpen} sort />) : showBadge ? <FlyyBadge size={"small"} rounded grey badgeText={badgeText} /> : <div />}
      </div>
      {isOpen && (
        <div className={`p-3 ${customizableClassProps} border-gray-200`}>
          {content || children}
        </div>
      )}
    </div>
  )
}

这些形式是通过content个props 呈现的.

我已经try 在父文件中初始化状态，但仍然面临相同的问题.

如果您需要任何其他细节，请让我知道 谢谢