Is it possible to wrap groups in <div> when using <GroupedVirtuoso /> and display current group(s) as a items?

[Kackar212]

What i want to do is rather simple in theory, i am creating emoji picker like the one on discord, where you can expand/collapse emojis grouped by category(accordeon) and i would like to make it accessible so i want group/category and emojis in one element or at least emojis from this category in one element.

My emojis are grouped by category and split into rows so my data structure looks like this

[{ category: string, emojis: [Array(7), Array(7), ...] }, ...];

So if there are 70 emojis in category then groupCount for this category is 10.

I want group to be displayed as item, simplified structure should look like this:

<section>
  {/* group */}
  <h3>
    <button aria-expanded="..." aria-controls="..." id="...">...</button>
  </h3>
  <div aria-labelledby="..." id="..." role="region"> 
    {/* row/item */}
    <ul>
      <Emoji ... />
      <Emoji ... />
      ...
    </ul>
    {/* row/item */}
    <ul>
      <Emoji ... />
      <Emoji ... />
      ...
    </ul>
  </div>
</section>

This would also be okay:

{/* group */}
<h3>
  <button aria-expanded="..." aria-controls="..." id="...">...</button>
</h3>
<div aria-labelledby="..." id="..." role="region"> 
  {/* row/item */}
  <ul>
    <Emoji ... />
    <Emoji ... />
    ...
  </ul>
  {/* row/item */}
  <ul>
    <Emoji ... />
    <Emoji ... />
    ...
  </ul>
</div>

Currently i have it working with flat structure and group is not displayed as item so just default thing and its working okay if we just disregard accessibility.

I need one scroll container so multiple lists dont satisfy me.
Is this even possible?