How to set scrollbar to bottom for ScrollArea

[hasnainadil]

I'm a bit new to react and nextjs development. I'm using nextjs14 for a dummy chatapp. I was trying to set the scrollbar to bottom when I enter the page so I tried this

useEffect(() => {
// Scroll to bottom of the scroll area
if (scrollAreaRef.current) {
console.log("scrolling to bottom");
scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight;
console.log(scrollAreaRef.current.scrollHeight); //I'm getting 537 here
console.log(scrollAreaRef.current.scrollTop); //I'm still getting 0 here height can't be set
}
}, [chatMessages, openedChat]);

{chatMessages.map((message, index) => (

{message}

))}

this doesn't work at all but usual div works just fine
regular div code:

{chatMessages.map((message, index) => (

{message}

))}

this code above works fine with the code in useEffect I also tired to use id to get the scroll area but not working. How can I set the scrolltop to bottom of the ScrollArea with shadcn ScrollArea component. Thanks in advance.