title: Why scrollIntoView works when component first loads but it doesn't onClick?
body: <p>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.</p>
  <p>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.</p>
  <p><strong>Messenger.jsx</strong></p>
  <pre><code>const [messages, setMessages] = useState([]);
  const scrollRef = useRef();
  
  
  ....
  const handleSubmit = async () =&gt; {
      const data = {
        conversationId: currentChat._id,
        sender: user._id,
        text: input,
      };
  
      const response = await newMessage(data);
      setMessages([...messages, response]);
      setInput('');
      setIsDisabled(true);
    };
  
   useEffect(() =&gt; {
      scrollRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);
  
  
  ...
  
  &lt;div className='chat-box__top'&gt;
       {messages.length &gt; 0 &amp;&amp;
          messages.map((message) =&gt; (
           &lt;div ref={scrollRef} key={message._id}&gt;
              &lt;Message className='message' own={message.sender._id=== user._id} message={message} /&gt;
               &lt;/div&gt;
        ))}
  &lt;/div&gt;
  
  
  ....
  
  &lt;button className='chat-box__submit' onClick={handleSubmit} disabled={isDisabled}&gt;
        &lt;SendIcon className='icon' /&gt;
  ---.&lt;/button&gt;
  </code></pre>
  <p><strong>CSS of Messenger</strong></p>
  <pre><code>.chat-box__top{
     padding-right: 10px;
     overflow-y: auto;
  }
  </code></pre>