React useRef scroll to bottom

Помогите с одной проблемой. Есть раздел сообщение где скрол начинается с последнего элемента при загрузки компонента, но после добавление футера в проект в этом компоненте у меня все скролы на странице начинается с конца, как можно правильно сделать чтоб именно внутри компонента сообщение скрол срабатывал снизу ?

const MessageUiBody = ( { messages } ) => {

  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current && messagesEndRef.current.scrollIntoView();
  };

  useEffect( () => {
    scrollToBottom()
  }, [messages]);

  return (
    <div>    
      <div ref={messagesEndRef}>
         // .....
      </div>
    </div>
  )
}