Как в React скроллить до нового элемента при добавлении?

Есть список div-элементов, который разворачивается с помощью map. В какой-то момент юзер может нажать кнопку и добавить новый элемент, который появится внизу списка. Задача - скроллить о этого нового элемента.

Я видел решения (см. пример ниже), где используются ref и метод window.scrollTo. Но они используются для простых случаев, когда элемент уже есть в дом-дереве, и для вариантов, где нет списков map. Для меня совершенно не очевидно, как организовать такую систему для моего случая.

Пример из учебника:

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}></div> 
    }  

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling. 

}

Примерный код, где я это хочу использовать:

const MyComponent = () => {
  const [arr, setArr] = useState(['q', 'w', 'r']);

  const addNew = () => {
    setArr(prev => [...prev, 'new string']);
    // здесь нужно скроллить на новый элемент
 }

  return (
   <div>
     { arr.map(item => <div>{item}</div>) }
     <button onClick={addNew}>Add new</button>
   </div>
 )
}