How to use directionLightHelper in react/three-fiber?

Question

I am trying to use the directionalLightHelper in my NextJS project but am unable to. So far I have tried two methods.

Method 1 -

const dirLight = useRef<DirectionalLight>(null);

return (
  <Canvas>
    <directionalLight color={"#005F00"} intensity={1} ref={dirLight} />
    <directionalLightHelper light={dirLight} />
  <Canvas>
)

In this case I am getting the error TypeError: light is undefined

---

Method 2 -

I created a Light component with the useHelper hook and passed that inside the canvas.

const Light = () => {
  const dirLight = useRef<DirectionalLight>(null);
  useHelper(dirLight, DirectionalLightHelper, "red");

  return (
    <>
      <directionalLight color={"#005F00"} intensity={1} ref={dirLight} />
    </>
  );
};

In this case I am getting a black colored line at the origin. I am confused if the light helper is supposed to look like this or not?

Answer 1

I checked the properties the useHelper hook takes in and found out that the color comes after the size argument. So doing a few changes to the code made a square appear on the canvas, much similar to what the DirectionLightHelper function gives in vanilla three.js.

useHelper(dirLight, DirectionalLightHelper, 1, "red");

Upon changing the position of the directional light, the helper responds accordingly.