我在选择语言时遇到问题，它可以选择书写

Question

在此输入图像描述 所以正如你所看到的，当我选择它时，旗帜的左侧有问题，它不断出现，当我更改语言时它消失，我想得到它的权利，请帮助

'use client';

import { useRouter } from 'next/navigation';
import { usePathname } from 'next/navigation';
import { useTranslation } from 'react-i18next';
import i18nConfig from '../../../../i18nConfig';
import Select, { SingleValue } from 'react-select';
import Flag from 'react-world-flags';

const languages = [
    { code: 'en', name: 'English', flag: 'GB' },
    { code: 'ru', name: 'Русский', flag: 'RU' },
    { code: 'kk-KZ', name: 'Қазақша', flag: 'KZ' },
];

type LanguageOption = {
    value: string;
    label: JSX.Element;
};

export default function LanguageChanger() {
    const { i18n } = useTranslation();
    const currentLocale = i18n.language;
    const router = useRouter();
    const currentPathname = usePathname();

    const handleChange = (selectedOption: SingleValue<LanguageOption>) => {
        if (!selectedOption) return;
        const newLocale = selectedOption.value;

        // set cookie for next-i18n-router
        const days = 30;
        const date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        const expires = date.toUTCString();
        document.cookie = `NEXT_LOCALE=${newLocale};expires=${expires};path=/`;

        // redirect to the new locale path
        if (currentLocale === i18nConfig.defaultLocale && !i18nConfig.defaultLocale) {
            router.push('/' + newLocale + currentPathname);
        } else {
            router.push(currentPathname.replace(`/${currentLocale}`, `/${newLocale}`));
        }

        router.refresh();
    };

    const customStyles = {
        control: (provided: any) => ({
            ...provided,
            width: 200,
            height: 1,
            backgroundColor: 'transparent',
            cursor: 'pointer',
            webkitUserSelect: 'none',
            msUserSelect: 'none',
            userSelect: 'none',
        }),
        option: (provided: any, { isFocused }: { isFocused: boolean }) => ({
            ...provided,
            backgroundColor: isFocused ? '#e0e0e0' : '#fff',
            display: 'flex',
            alignItems: 'center',
        }),
    };

    const options = languages.map(lang => ({
        value: lang.code,
        label: (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Flag code={lang.flag} style={{ width: '20px', height: '15px', marginRight: '8px' }} />
                {lang.name}
            </div>
        ),
    }));

    return (
        <Select
            defaultValue={options.find(option => option.value === currentLocale)}
            onChange={handleChange}
            options={options}
            styles={customStyles}
        />
    );
}

我希望当用户想要更改语言时没有它它会正常，并且我尝试的每种语言都会发生这种情况，也尝试使用不同类型的光标，但它对我来说不起作用

Answer 1

<Select
        defaultValue={options.find(option => option.value === currentLocale)}
        onChange={handleChange}
        options={options}
        styles={customStyles}
        isSearchable={false}  // Disable text input
    />

这就是这个问题的解决方法