Type 'MutableRefObject<null>' is missing the following properties from type 'Element'

Question

I'd like to use intersection observer in my React TS project.

(https://www.npmjs.com/package/react-intersection-observer)

At one point I cannot set the root:

const root = useRef(null);

const { ref, inView, entry } = useInView({
     root: root,
     threshold: 0,
     onChange: () => console.log(inView)
});

At this point the root option gives this error:

Type 'MutableRefObject<null>' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 164 more.ts(2740)

Can I set the root with ref?

Answer 1

const rootRef = useRef<HTMLDivElement | null>(null);

const { ref, inView } = useInView({
  root: rootRef.current,
  rootMargin: "0px",
});

The current property is used to access or modify the mutable value or object.