Headless UI Close/Open specific Disclosures

Hi can anyone help me on how to close/open specific Headless UI Disclosures. Right now when I open one disclosures, the others will be opened too. Here is the existing condition:

What I like to achieve is that, when I open one disclosure the others will still be closed, or if I open 2 disclosures, the rest 2 disclosures will still be closed. The existing is correct, because the other data is not showed, but the problem is the white space, because it follows the opened one.

Here is my code, I created a component:

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>
  );
};

Here how I use the component:

         <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>

I fixed this issue by adding items-start in parent <div> and it solved the issue.