If I have an array like this:

let arr = [
    { color: 'blue', size: '12' },
    { color: 'red', size: '12' },
    { color: 'green', size: '13' },
]

Rendered like this in React ( with useRef to mark all of those elements ):

import React, { useRef } from 'react'

const ExampleComponent = () =>
{
    var cardRef = useRef([])

    return (
        <div style={{ maxWidth: '50vw', overflowX: 'auto' }}>
            <ul className="d-flex" style={{ listStyle: 'none' }}>
                { arr.map( ( obj, id ) => {
                    return(
                        <div key={ id } ref={ el => cardRef.current[ id ] = el } className="card" style={{ width: '55vw', height: '20vh' }}>
                            <div><p>color: { obj.color }</p></div>
                            <div><p>size: { obj.size }</p></div>
                        </div>
                    )
                })}
            </ul>
        </div>
        )
}

How can I get a button like the one below to focus on the last element of color green and size 13?

<button 
    onClick={ e => { 
        e.preventDefault()
        sourceRef.current[ 2 ].focus() 
    }}
    className="btn btn-sm btn-info">
        Focus Source 1
    </button>

I only ask because I expected by clicking that button that it would cause the last element to scroll into view but it did not.

How can I get the last element to scroll into view?