Emoji Mart Picker categories not responding to click events in Stimulus Controller

Question

I'm integrating the Emoji Mart Picker into a Stimulus controller and encountering an issue: the category icons in the picker are unresponsive to clicks, preventing category switching. The picker initializes correctly, and I can select emojis, but I can't switch categories. There are no console errors.

Here are the steps I've taken:

• Ensured that Emoji Mart does not list React as a dependency, as my project isn't using React.
• Tried installing React to see if it would resolve the issue, which it didn't.
• Attempted to follow the documentation for non-React environments, but the issue persists.

I'm also unclear on the role of the data property during the Picker's initialization and whether it's related to this issue. The documentation at Emoji Mart's GitHub doesn't seem to require it explicitly for basic functionality.

Here's my package.json snippet for relevant dependencies:

jsonCopy code

"dependencies": {
    "@emoji-mart/data": "^1.1.2",
    "emoji-mart": "^5.5.2",
    // ... other unrelated packages ...
}

And here's a concise version of my current Stimulus controller setup:

javascriptCopy code

// EmojiPicker_controller.js
import { Controller } from '@hotwired/stimulus';
import * as EmojiMart from "emoji-mart";

export default class EmojiPicker_controller extends Controller {
    // ... other methods ...

    connect() {
        // ... code to check for mobile and initialize picker ...
        this.picker = new EmojiMart.Picker({
            set: 'twitter',
            theme: 'dark',
            onEmojiSelect: (emoji) => this.onEmojiSelect(emoji),
            // ... more options ...
        });

        // ... append to body, set class, and hide ...
    }

    // ... other methods ...
} 

I've also tried different variations of initializing the picker with data passed in, to no avail.

Has anyone experienced this or have suggestions on what could be going wrong?