Refinement list checked Filter Reset when Dialog modal is Closed

Hi everyone I am facing issue I have React instant Search Refinement list in Mobile Filter Menu Dialog when i close the menu the Checked filter is reset I don't know what is happening

This is my instant search and Search Data is my Main component

<InstantSearch searchClient={searchClient} indexName={searchIndex} >
   
    <Configure hitsPerPage={50} getRankingInfo={true}  />
    <SearchData
      {...{
        mobileFiltersOpen,
        setMobileFiltersOpen,
        selectedEarningsRange,
        selectedDegree,
        setSelectedEarningsRange,
        setSelectedDegree,
        setSearchIndex,
        searchIndex,
      }}
    />
  </InstantSearch>

Now here is my main a Dialog From HeadlessUI React and Refinemenlist

     <Transition.Root show={mobileFiltersOpen} as={Fragment}>
          <Dialog
            as='div'
            className='relative z-40 lg:hidden'
            onClose={closemodel}

            
          >
            <div className='fixed inset-0 z-40 flex'>
              <Transition.Child
                as={Fragment}
                enter='transition ease-in-out duration-300 transform'
                enterFrom='translate-x-full'
                enterTo='translate-x-0'
                leave='transition ease-in-out duration-300 transform'
                leaveFrom='translate-x-0'
                leaveTo='translate-x-full'
              >
                <Dialog.Panel className='relative ml-auto flex h-full w-full max-w-full flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl inset-0-full'
                >
                  <div className='flex items-center justify-between px-4'>
                    <h2 className='text-lg font-medium text-gray-900'>
                      Filters
                    </h2>
                    <button
                      type='button'
                      className='-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400'
                     onClick={closemodel}
                    >
                      <span className='text-lg font-medium text-gray-900' >Close</span>
                      <XMarkIcon className='h-6 w-6' aria-hidden='true' />
                    </button>
                  </div>

                  {/* Filters */}
                  <div className='mt-4 ml-4 border-t border-gray-200'>
             
                    <RefinementList
                      attribute='CREDDESC'
                      limit={10}
                      
                      classNames={{
                        root: 'space-y-6',
                        labelText: 'ml-1',
                        label: 'text-sm text-gray-500',
                        input:
                          'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500',
                      }}
                    />
                    </div>
                   </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </Dialog>
        </Transition.Root>

Now Problem is when on Mobile when I checked some filter and close modal the Filters also Reset please anyone Can help on this

This is the default behavior of the library. When you mount your RefinementList, it triggers a request even before you select a refinement. When you unmount RefinementList, it is removed from the state and all its refinements are lost.

But you have some solutions:

• Hide the component instead of unmount it

If you use react-instant-search-hooks you can also

• Use a virtual widget on the same attribute
• Use the hook on a parent element

You can find more informations in the documentation