how to use useHelper with DirectionalLight in typescript

[steelx]

im facing this TYPE error:

Type 'RefObject<DirectionalLight>' is not assignable to type 'MutableRefObject<Object3D<Event>>'.

"@react-three/drei": "^9.57.0",
"@react-three/fiber": "^8.11.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.150.1"

Problem description:

how to use useHelper with DirectionalLight in typescript.
I get similar type error when using TransformControls as well.

Relevant code:

import { OrbitControls, useHelper } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { Perf } from "r3f-perf";
import { useRef, type PropsWithChildren } from "react";
import { DirectionalLightHelper, type DirectionalLight } from "three";

const LightWithHelper = () => {
	const dirLightRef = useRef<DirectionalLight | null>(null);
	if (dirLightRef !== null) {
		useHelper(dirLightRef, DirectionalLightHelper, 1, 0xff0000);
	}

	return (
		<directionalLight
			castShadow
			position={[1, 5, 5]}
			intensity={1.2}
			ref={dirLightRef}
		/>
	);
};

const FiberContainer = ({ children }: PropsWithChildren) => {
	return (
		<Canvas
			camera={{
				position: [14, 12, 5],
				fov: 40,
				near: 1,
				far: 200,
				zoom: 1,
			}}
			shadows
		>
			<Perf />
			<axesHelper />
			<OrbitControls
				makeDefault
				minDistance={1}
				maxDistance={200}
				enablePan={false}
				enableZoom={true}
			/>
			<ambientLight intensity={0.3} />
			<LightWithHelper />
			<color args={["ivory"]} attach="background" />
			{children}
		</Canvas>
	);
};

export default FiberContainer;

Suggested solution:

can you share any typescript examples ?

issue with TransformControls as well

[steelx]

I get similar Object3D<Event> issue with other drei objects such asTransformControls
I can bypass this type error with bang, but was wondering what is the proper way to handle this.
Quick fix ->

const ref = useRef<DirectionalLight>(null!);
useHelper(ref, DirectionalLightHelper, 1, 0xff0000);

[Droniukas]

I am also very interested in the correctness of using null!

[finsther]

try using
const directionalLightRef = useRef<DirectionalLight>(new DirectionalLight());