How do you call function after a scrollbar renders in React

Question

I have a chatbot where a scrollbar appears after overflow-y: auto is met by max-height. I want to ensure the scrollbar goes to the bottom of the chat window right after the response from the chatbot is rendered. I already use scrollIntoView, which jumps to the bottom on any request after the scrollbar is rendered. It is that initial response that may return a answer long enough to make the scrollbar appear that is the issue. I have tried useEffect, but it doesn't work the way I want it to. The only thing I can get to work is setTimeOut, just long enough for the scrollbar to be rendered. I don't really want to use setTimeOut.

The code that works is

const chatWin = document.querySelector('.chat');

setTimout(() => {
chatWin.scrollIntoView({ block: 'end'})
}, 100)

also tried

useEffect(() => {
chatWin.scrollIntoView({ block: 'end'})
}, [setConversation])