How can I get access to MicrophoneButton component from BotFramework WebChat to update state when microphone button is being hovered?

Question

In general, I want to update some state and show a new component (menu with options) above the microphone button when the microphone is being hovered, but I don’t know how to easily access this MicrophoneButton component.

Right now I use hacky vanilla JS approach with document.querySelector, because with it I do not need to rewrite anything inside botframework-webchat library just to get access to MicrophoneButton component, because as far as I understand to get access to it using proper React I would have to use refs and/or forwardRefs, but I don’t think it’s possible without rewriting the code for MicrophoneButton component.

I would like to do something like this but without resorting to vanilla JS in my React app:

useEffect(() => {
        let mic = document.querySelector('div.webchat__microphone-button');
        if (mic) {
            mic.addEventListener('mouseenter', () => {
                setMicIsHovered(true);
            })
            mic.addEventListener('mouseleave', () => {
                setMicIsHovered(false);
            })
        }
    }, [showMic])

I’m a beginner in React world so it’s very likely that I’m missing something here and there is an easy way to do it without explicitly using event listeners, so I would really appreciate some guidance.