Performance consideration with collapse component

[Asqit]

Greetings!
First of all I wanna say thank you for making such a beautiful and useful UI library.

Now, to the main thing, I wonder how can I improve performance (smoothness) of my application. Basically, I have a list of 50 items per page and each is an collapsible component within which could be two additional collapsibles for tables.

Basically all of my collapsibles look like this:

<div className='collapse collapse-arrow'>
  <input type='checkbox' className='min-h-0' />
  <div className='collapse-title font-medium bg-gray-300 px-2 p-1 min-h-0'>
    /* COLLAPSE TITLE */
  </div>
  <div className='collapse-content bg-white py-0 px-2'>
    /* COLLAPSE BODY */
  </div>
</div>

I had to turn off the default padding and min-height properties to achieve the desired style. The issue I have with the component is when I have more than five collapsibles, at which point it's visually struggling to open. (It works just fine, but it's laggy)

As a temporary fix I turned off the transition property. (Also, the entire animation takes ~50ms more than it is defined in css ... .2s -> 250ms)

I am using each of these components in client-side components in next.js app.

Again, thank you for all your work.