I am attempting to add a searchbar to my MUI select componen, however the value feild is causing the component to close when the searchbar is clicked and an option has not yet been selected.my desired outcome is for my default value to be an empty string and still be able to use the searchbar without select closing. to solve this problem i have attempted to add a default value and a forced value however this does not work because the default strings are not one of the options in select.

 <FormControl >
            <Box >
              <Select
                displayEmpty
                value={
                   ""
                }
                onChange={(e) => { setSelectedValue(e.target.value)
                }}
                renderValue={(selectedMaterialId) => {
                  const selected = //logic
                  );
                  return selected ? (
                    selected.name
                  ) : (
                    <em>Select a Course...</em>
                  );
                }}
                IconComponent={ExpandMore}
              
              >
                <Box >
                  <Search />
                </Box>

                {array
                  .filter(
                  //my filter
                  )
                  .map((value) => {


                      return (
                        <MenuItem
                          key={a string value} 
                          value={a string value}
                        >
                          {value.name} 
                          <div className={styles.optionSpacing}>
                            {value.stringValue}
                          </div>
                        </MenuItem>
                      );
                    });
                  })}
              </Select>
            </Box>
          </FormControl>