React: MaterialUI Select Component doesn't show passed values a prop

I have this FormControl element with Select that accepts an array of options that is being used for MenuItem options and also a value as props and this component looks like this:

const TaxonomySelector = (props) => {
const { isDisabled, taxonomies, selectedTaxonomy, handleTaxonomyChange } = props;
return (
    <Grid item xs={12}>
        {console.log(selectedTaxonomy)}
        {console.log(taxonomies)}
        <FormControl disabled={isDisabled} fullWidth>
            <InputLabel>Таксономия</InputLabel>
            <Select
                value={selectedTaxonomy || ''}
                onChange={handleTaxonomyChange}>
                {Object.values(taxonomies).map((taxonomy) => (
                    <MenuItem key={taxonomy.id} name={taxonomy.name} value={taxonomy}>
                        {taxonomy.name} от {moment(taxonomy.date).format('YYYY-MM-DD')}
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
    </Grid>
  );
};

The values that I pass as props are correctly displaying as filled out in the console at all stages the component is being rendered. And also in the case when this component is used for selection through using handleTaxonomyChange function everything is working correctly with user being able to select a particular option out of the array provided to the MenuItem. However, the problem occurs in case when the parent component of this component is being open for View Only or with already pre-defined values. In this case I get the following:

It seems like there's something is being passed to the Select component (even I checked through React Component in DevTools and value was showed correctly) but for some reason it is not being displayed.

The parent component contains the following code related to this part:

const INITIAL_SELECTED_TAXONOMY = null;

const [selectedTaxonomy, setSelectedTaxonomy] = useState(INITIAL_SELECTED_TAXONOMY);
const handleTaxonomyChange = (e) => setSelectedTaxonomy(e.target.value);

useEffect(() => {
    getTaxonomies();
}, []);

useEffect(() => {
    if (viewTypeOnlyView) {
        handleStageChange(1);
        handleDialogTitleChange('Конструктор КС. Режим просмотра');
    }

    if (viewTypeEdit) {
        handleDialogTitleChange('Конструктор КС. Режим редактирования');
    }

    if (viewTypeCopy) {
        handleDialogTitleChange('Конструктор КС. Дублирование КС');
    }

    if (defaultData) {
        if (defaultData.name) setName(defaultData.name);
        if (defaultData.taxonomy) setSelectedTaxonomy(defaultData.taxonomy);
        // if (defaultData.entryPoints) setSelectedEntryPoints(defaultData.entryPoints);
        if (defaultData.entryPoints) {
            getEntryPointDescsFn('4.1', defaultData.entryPoints);
        }
        if (defaultData.message) setMessage(defaultData.message);
    }
}, [viewType]);

ViewType is a prop that is being passed to this component and calling those methods in order to fill up the state with predefined values.

And the TaxonomySelector component inside the return statement:

<TaxonomySelector
    taxonomies={taxonomies}
    isDisabled={currentStage === 1}
    selectedTaxonomy={selectedTaxonomy}
    handleTaxonomyChange={handleTaxonomyChange} />

At first I thought that the issue could be related to how the component is being rendered and maybe it renders before that data pre-fill useEffect hook is being triggered. However, it seems that other elements, like the ones with string values name and message are being correctly filled out with no issues. Seems like that the issue is specifically related to Select elements. Could you let me know what could it possibly be?