Virtualize small list of large lists in React

Question

I am buliding an emoji picker as part of a larger react project and have encountered an issue. I have successfully built the emoji picker, but it is extremely slow

This is because there are thousands of emojis. As you can see, the emojis are sorted into a few categories (above you can see the beginning of "Smileys & Emotion" and "People & body". The solution is to virtualize the emoji picker so only the emojis actually visible are fetched. However there is a problem. Each category is created like so

                <div id="icons">
                    {emojiSet.map(x => (
                        <IconCategory name={x.Name} icons={x.Icons} filter={searchQuery}/>
                    ))}
                </div>

The category component looks like this

export default function IconCategory({name = "", icons = [], filter = ""}) {
    return (
        <div className="emoji-category">
            <p>{name}</p>
            {icons.filter(y => y.Names.some(x => x.includes(filter.toLowerCase()))).map(x => (
                    <Icon url={x.Url}/>
                ))}
        </div>
    )
}

So each category contains a large number of emojis, and there are only a few categories.

I can use a library like react-window to virtualize the Icons in each IconCategory, but then each category will be individually scrollable which is not what I want. I could virtualize the list of IconCategorys, but since there are only a few categories each containing alot of items, this would not provide much benefit.

How can I virtualize this entire list?