I have created one selector that has two drop-down lists. As I click on it, the first list expands, I want to select an item from it and at that point, instead of the second list appearing, the list automatically closes.I am using material ui and do not want to create a new selector for the second list.

Another issue is whether it is possible to remove the default right padding of select in any way?

<FormControl>
              <Select
                id="movie-series-select"
                value={movieOptions.length > 0 ? seriess : ""}
                renderValue={() => null}
              >
                {movies.map((movie) => (
                  <MenuItem key={movie} onClick={() => update(movie)}>
                    {movie}
                  </MenuItem>
                ))}
                {movieOptions && (
                  <Box>
                    {seriess.map((seriesindex) => (
                      <MenuItem
                        value={series}
                        key={series}
                        onClick={() => clickSeries(index)}
                        selected={selectedseriess.includes(index)}
                      >
                        {series}
                      </MenuItem>
                    ))}
                  </Box>
                )}
              </Select>
            </FormControl>