嗨，任何人都可以帮助我如何关闭/打开特定的无头UI披露。现在，当我打开一个披露，其他人也将被打开。这是现有的条件：

我想实现的是，当我打开一个披露时，其他披露仍将关闭，或者如果我打开2个披露，其余2个披露仍将关闭。现有的是正确的，因为其他数据未显示，但问题是白色，因为它在打开的数据之后。
下面是我的代码，我创建了一个组件：

import React from 'react';
import { Disclosure } from '@headlessui/react';
import { ChevronUpIcon } from '@heroicons/react/solid';
import { Ratio } from '../ratio/Ratio';

export const CardValue = ({
  icon,
  title,
  subtitle,
  children,
  subtitleClassName,
  selected,
  arrow,
  arrowValue,
}) => {
  return (
    <div className='w-full max-w-[325px] rounded-lg bg-white p-2'>
      <Disclosure>
        {({ open }) => (
          <>
            <Disclosure.Button className='flex w-full justify-between rounded-lg px-4 py-2 text-left text-sm font-medium focus:outline-none'>
              <div className='bg-[#01B5A3] rounded-lg p-2'>{icon}</div>
              <div className='flex flex-col space-y-3'>
                <label className='text-lg'>{title}</label>
                <label
                  className={`text-2xl font-semibold ${subtitleClassName}`}>
                  {subtitle}
                </label>
              </div>
              <div className='flex flex-col space-y-5 items-center'>
                <ChevronUpIcon
                  className={`${
                    open ? 'rotate-180 transform' : ''
                  } h-5 w-5 text-[#727272]`}
                />
              </div>
            </Disclosure.Button>
            {}
            <Disclosure.Panel className='px-4 pt-4 pb-2 text-sm text-gray-500'>
              {children}
            </Disclosure.Panel>
          </>
        )}
      </Disclosure>
    </div>
  );
};

下面是我如何使用该组件：

<CardValue
          icon={<ChartBarIcon className='text-white h-5 w-5' />}
          title={'Sales Converted'}
          subtitle={`${detailStore?.currency} ${
            salesConverted?.total == 0 ? 'N/A' : salesConverted?.total
          }`}
          subtitleClassName={`${
            salesConverted?.total == 0 ? 'text-na_text' : 'text-black'
          }`}>
          <>
            <hr />
            <div className='flex flex-1 flex-col mt-6 mb-4 space-y-4 text-sm'>
              <div className='flex flex-1 flex-row items-center'>
                <div className='rounded-full bg-[#1368B4] h-[10px] w-[10px] mr-2'></div>
                <label>Average Sales Value</label>
                <div
                  className={`text-na_text font-semibold flex flex-1 justify-end`}>
                  {detailStore?.currency} N/A
                </div>
              </div>
              <div className='flex flex-1 flex-row items-center'>
                <div className='rounded-full bg-[#01B5A3] h-[10px] w-[10px] mr-2'></div>
                <label>Leads Converted</label>
                <div
                  className={`${
                    salesConverted?.detail?.leadsConverted == 0
                      ? 'text-na_text'
                      : 'text-black'
                  } font-semibold flex flex-1 justify-end`}>
                  {salesConverted?.detail?.leadsConverted != 0
                    ? salesConverted?.detail?.leadsConverted
                    : 'N/A'}
                </div>
              </div>
              <div className='flex flex-1 flex-row items-center'>
                <div className='rounded-full bg-[#7B61FF] h-[10px] w-[10px] mr-2'></div>
                <label>Sales Leads</label>
                <div
                  className={`${
                    salesConverted?.detail?.salesLeads == 0
                      ? 'text-na_text'
                      : 'text-black'
                  } font-semibold flex flex-1 justify-end`}>
                  {salesConverted?.detail?.salesLeads != 0
                    ? salesConverted?.detail?.salesLeads
                    : 'N/A'}
                </div>
              </div>
              <div className='flex flex-1 flex-row items-center'>
                <div className='rounded-full bg-[#01B5A3] h-[10px] w-[10px] mr-2'></div>
                <label>SA Attend Rate</label>
                <div
                  className={`text-black font-semibold flex flex-1 justify-end`}>
                  {salesConverted?.detail?.saAttendRate != 0
                    ? salesConverted?.detail?.saAttendRate
                    : 'xx'}{' '}
                  %
                </div>
              </div>
            </div>
          </>
        </CardValue>