Как правильно реализовать реф на Select?

Есть компонент Material-UI Stepper. В первый Step вставлен компонент, внутри которого Select. При выборе значения в Select и переходе на следующий шаг, элементы из первого шага удаляются из DOM полностью. Если я хочу вернуться в предыдущий шаг, то в компоненте Select'a хранится предыдущее выбранное значение, но оно визуально не отображается в самом поле, т.е поле остается пустым. Нужно что-то придумать либо с рефами, чтобы компонент не удалялся из дерева полностью, либо что-то еще.

Код компонента с Select:

<FormControl variant="outlined" >
        <InputLabel id="demo-customized-select-label">
            Специалист
        </InputLabel>
        <Select
            className={classes.select}
            labelId="demo-customized-select-label"
            value={props.selectedMaster?.name}
            onChange={handleChange}
            input={<BootstrapInput/>}
        >
            <MenuItem value={JSON.stringify(null)}>
                <Typography>
                   Все
                </Typography>
            </MenuItem>
            {props.masterList.map(masterData => {
                return (
                    <MenuItem key={masterData.id} value={JSON.stringify(masterData)}>
                        <Typography>
                            {masterData.name}
                        </Typography>
                    </MenuItem>
                )
            })}
        </Select>
    </FormControl>