i am new to using Aframe and have been integrating it into a React app. i am trying to create a component with a Button overlaid digitally on the device's camera, and for that button to do something(for now just a console log). Currently everything is displayed correctly, but no clicks are ever registered. here is my code:

import React from 'react'

const Sandbox = () => {
  return (
    <div>
      <a-scene embedded arjs="sourceType: webcam;" vr-mode-ui="enabled: false">
        <a-entity cursor="rayOrigin: mouse" position="0 1.5 -3">
          <a-plane
            position="0 0 -3"
            width="1"
            height="0.2"
            color="blue"
            onclick={() => console.log("Button clicked!")}
          >
            <a-text value="Click" align="center" position="0 0 0.1"></a-text>
          </a-plane>
        </a-entity>
        <a-camera position="0 0 0"></a-camera>
      </a-scene>
    </div>
  )
}

export default Sandbox

I have also tried using an eventlistener with useRef. This does not work either. the listener gets added, but there is never a click.

import React, { useEffect, useRef } from 'react'

const Sandbox = () => {
    const buttonRef = useRef(null);

    const doSomething = () => {
        console.log("clicked the button");
    }

    useEffect(() => {
        if (buttonRef.current) {
          console.log("added event listener");
          
          buttonRef.current.addEventListener('click', doSomething);
        }
    
        return () => {
          if (buttonRef.current) {
            console.log("removed event listener");
            
            buttonRef.current.removeEventListener('click', doSomething);
          }
        };
      }, []);

  return (
    <div>
      <a-scene embedded arjs="sourceType: webcam;" vr-mode-ui="enabled: false">
        <a-entity cursor="rayOrigin: mouse" position="0 1.5 -3">
          <a-plane
            position="0 0 -3"
            width="1"
            height="0.2"
            color="blue"
            ref={buttonRef}
          >
            <a-text value="Click" align="center" position="0 0 0.1"></a-text>
          </a-plane>
        </a-entity>
        <a-camera position="0 0 0"></a-camera>
      </a-scene>
    </div>
  )
}

export default Sandbox

Any help with how to do clicks with Aframe would be helpful. might it be that integrating it into react is a bad idea?