React-select default value is not being translated with React-i18next

Question

I have set up Select component as follow

                <Select
                    styles={customStyles}
                    defaultValue={{ label: t('Text to be translated'), value: 'all' }}
                    components={{
                       IndicatorSeparator: () => null,
                        }}
                    isSearchable={isSearchable}
                    options={[
                       { value: 'val1', label: t('text 1') },
                       { value: 'val2', label: t('text 2') },
                       { value: 'val3', label: t('text 3') },
                   ]}
                   onChange={handleSelectChange}
                   isDisabled={disabled}
                />

my defaultValue is translated only on first load of component. Changing language does not affect in any ways. Text is show in language that was chosed on initial load. But fun fact - options are translated with no problem at all

Answer 1

You should pass key as parameter to your Select element. Make sure that it's unique value, label from defaultValue good for it I think. Quote from official documentation below

Keys help React identify which items have changed, are added, or are removed.