Estoy usando React y formik, quiero desplazar los elementos de la lista, pero se desplaza hasta el elemento determinado, pero el único desafío es que también desplaza toda la página, no quiero que se desplace toda la página, ¿cómo puedo resolver? este:

NOTA:

Siempre quiero que Alemania como país esté en la cima, esto funciona, pero también se desplaza por toda la página, lo cual no quiero.

A continuación se muestra mi código:

 const getOptionRender = { internationalPrefix: (option: CountryType) => ( <Typography data-name={option.country}> {option.country} +{option.prefix} </Typography> ), nationality: (option: CountryType) => ( <Typography data-name={option.nationality}>{option.countryNationality}</Typography> ), country: (option: CountryType) => ( <Typography data-name={option.country}>{option.country} ===</Typography> ), }; const handleOnOpenCountryList = useCallback(() => { const getOptionScroller = { internationalPrefix: '49', nationality: 'Deutsch', country: 'Deutschland', }; setTimeout(() => { const optionEl = document.querySelector(`[data-name="${getOptionScroller[type]}"]`); optionEl?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: "center" }); }, 1); }, [type]); return ( <FastField name={name} onOpen={handleOnOpenCountryList} component={CustomAutocomplete} options={sortedCountryList} getOptionLabel={handleGetOptionLabel} getOptionSelected={handleGetOptionSelected} disableClearable renderOption={handleGetOptionRender} renderInput={handleRenderInput} size="small" shouldUpdate={shouldFastFieldUpdate} {...props} /> );

Si observa detenidamente, la forma en que me desplazo se realiza mediante este código:

 setTimeout(() => { const optionEl = document.querySelector(`[data-name="${getOptionScroller[type]}"]`); optionEl?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: "center" }); }, 1);

Qué salió mal ?