TypeScript error: Property 'scrollIntoView' does not exist on type 'never'. TS2339

Question

In my component, I have the following code to scroll to the bottom of the page:

const el = useRef(null);

useEffect(() => {
    if (el.current === null) { }
    else
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });

    if (props.loading != true)
        props.fetchFeedbackTaskPageData(submissionId);

}, [])

This el ref is attached to a div (at the bottom of the page) like this:

<div id={'el'} ref={el}></div>

However, I am receiving the following error:

Property 'scrollIntoView' does not exist on type 'never'. TS2339

When I was not using !, I was receiving this error:

Object is possibly 'null'. TS2531

I checked many posts on this issue but did not see how to handle this in react when using useRef and scrollIntoView. Any ideas?

Answer 1

For anyone reading this in 2020 its

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

and no longer:

const el = useRef<null | HTMLElement>(null);