Scroll to element and leave it in the center on load using React

Let's assume that we are rendering a group of elements, and we want to scroll to a certain block and display it in the center of the page using React.

For example, let's assume that we want to render 8 elements and scroll to the 5th element:

jsx
import React, { useEffect, useRef } from 'react';

const scrollToCenter = () => {
    
    const ref      = useRef();
    const elems    = Array(8).fill(null);
    const scrollTo = 5;
        
    useEffect( () => {
        
        if(ref.current){
            
            ref.current.scrollIntoView({behavior: 'smooth', block: 'center'});
        
        }
        
    }, [ref.current]);
    
    return (
        
        <div className = 'GroupOfElems'>
            {elems.map( (e, i) => 
                <div key = {i} ref = {i === scrollTo ? ref : null}>Hi</div>
            )}
        </div>
        
    );
    
}

export default scrollToCenter;

We are creating a reference to the element to scroll. After the reference is created, we are calling the scrollIntoView function.