Nunca he visto chakra-ui, así que discúlpenme por no resolver completamente este problema.

Logré obtener la lista deseada para desplazarme a la vista con esta modificación a NutrientFilterOptions.tsx

 export const NutrientFilterOptions = () => { useEffect(() => { const ele = document.querySelector("#myNutFilter"); if (ele) ele.scrollIntoView(); }, []); return ( <div id="myNutFilter">

Lo que estoy haciendo es darle una identificación al elemento en lugar de usar useRef , aunque useRef puede ser ideal en esta situación.

Estoy usando useEffect porque quiero que el código se ejecute después de que se represente el componente.

Después de que el componente se procesa, tengo vanilla js para verificar primero que el elemento existe (isShown) y luego lo desplazo a la vista si existe.

Me gustaría agregar que esto no verifica cómo se mostró inicialmente la lista. Necesitaría un estado que realice un seguimiento de lo que abrió el menú de opciones, y solo se desplace si la fuente es correcta. Usaría perforación de prop o redux para manejar la fuente de apertura de opciones.

¡Ojalá eso ayude!