Si tengo una matriz como esta:

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

Representado así en React (con useRef para marcar todos esos elementos):

 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> ) }

¿Cómo puedo hacer que un botón como el de abajo se centre en el último elemento de color green y tamaño 13 ?

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

Solo pregunto porque esperaba que al hacer clic en ese botón hiciera que el último elemento se desplazara a la vista, pero no fue así.

¿Cómo puedo hacer que el último elemento se desplace a la vista?