Problem holding scroll bottom in react

[hanseongbugi]

I am working on a project using smooth-scrollbar-react.
The scrollbar I used is in the form of a react component.
I used the useRef hook to get a reference to the scroll bar.
However, the useRef hook failed to get a reference to the scroll bar.
So, is there any other way to get references or a good example of using the useRef hook?

version
"react": "18.2.0"
"smooth-scrollbar": "^8.8.3"
"smooth-scrollbar-react": "2.4.1"

here is my javascript code

const ChatScreen()=>{
  const scrollbarRef = useRef(null);

  useEffect(() => {
    const scrollbar = scrollbarRef.current.scrollbar; //Cannot get references from here
  }, []);

  return (
    <Scrollbar ref={scrollbarRef}>
      {/* here my content code*/}
    </Scrollbar>
  );
}

[sadeghbarati]

Hi

If you check smooth-scrollbar-react source
He is using forwardRef to return only DOM element if you use ref on Scrollbar component

More info here
https://react.dev/reference/react/forwardRef

We are writing simple wrapper for React
I'll let you know once it's completed