'hoveron' eventListener not firing

[myhendry]

My controlsRef hoveron eventListener is not working at all. I console log my controlsRef.current and it shows a DragControl is present. Anything I did incorrectly here? Thanks

import React, { useEffect, useRef, useState } from "react";
import { useThree, extend } from "react-three-fiber";
import { DragControls } from "three/examples/jsm/controls/DragControls";
extend({ DragControls });

interface Props {
  children: any;
}

const Dragable = (props: Props) => {
  // console.log(props.children)
  const groupRef = useRef<any>();
  const controlsRef = useRef<any>();
  const [children, setChildren] = useState<any[]>([]);

  const { camera, gl } = useThree();
  // console.log(groupRef.current);

  useEffect(() => {
    setChildren(groupRef.current.children);
  }, []);

  useEffect(() => {
    /*
      setChildren is not happening synchronously
      when we addEventListener, the setChildren has not been set yet
      hence need to use separate useEffect
    */
    console.log(controlsRef.current);
    controlsRef.current!.addEventListener("hoveron", (e: any) =>
      console.log("you hovered")
    );
  }, [children]);

  return (
    <group ref={groupRef}>
      {/* @ts-ignore */}
      <dragControls
        ref={controlsRef}
        args={[children, camera, gl.domElement]}
      />
      {props.children}
    </group>
  );
};

export default Dragable;

[netgfx]

I could be wrong... but should it be onhover or onmouseover ? usually events start with on followed by the event type (hover, mouseover, mouseout, etc)