useref() scrollIntoView() scrolling page instead of the div

Question

I am trying to scroll to latest message in my chat component.. but when i send a message, useref() scrolls complete page and chatbox too. is there any way to scroll only a selected div.

behaviour

useEffect(() => {
    scrollRef.current?.scrollIntoView({behavior: "smooth"})
}, [messages]);

This is my loop:

messages.map((m) => {
    return(
        <div ref={scrollRef} key={m._id}>
           <Message />
        </div>
     );
})

I'm trying to scroll only chatbox not the whole page.