I'm a creating a chat app and as this kind of apps work every time you send a new message the view should scroll down and show the new message.

The question is that when component renders first time it scrolls down but when I click to send a new message it doesn't. New message is added but it doesn't scroll. What I don't really understand it's that in Firefox it works as expected but it doesn't in Chrome.

Messenger.jsx

const [messages, setMessages] = useState([]);
const scrollRef = useRef();


....
const handleSubmit = async () => {
    const data = {
      conversationId: currentChat._id,
      sender: user._id,
      text: input,
    };

    const response = await newMessage(data);
    setMessages([...messages, response]);
    setInput('');
    setIsDisabled(true);
  };

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


...

<div className='chat-box__top'>
     {messages.length > 0 &&
        messages.map((message) => (
         <div ref={scrollRef} key={message._id}>
            <Message className='message' own={message.sender._id=== user._id} message={message} />
             </div>
      ))}
</div>


....

<button className='chat-box__submit' onClick={handleSubmit} disabled={isDisabled}>
      <SendIcon className='icon' />
---.</button>

CSS of Messenger

.chat-box__top{
   padding-right: 10px;
   overflow-y: auto;
}