Am using React and formik , I want to scroll items in the list but it scrolls to the certain item, but the only challenge is that , it also crolls the entire page, I dont want the entire page to be scrolled, how can I solve this:

NOTE:

I always want Germany as a country to be at the top, this works , but it also scrolls the entire page, which I don't want

Below is my code :

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

If you look closely, the way I scroll is done by this code :

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

What went wrong ?