I am trying to return a view in React. Unfortunately I need to place a container inside the map method and I don’t want to do that. I can’t pass React.Fragment because it’s not the correct approach in this case, I can’t pass a div either because the select list doesn’t expand for me and I have an empty container instead of a MenuItem.Is there any way around this?

I am using material UI components.

There should not be these divs inside the code.I use this code to display the options in select.

<Select>
{animals.map((animal: string) => (
                  <div>
                    <MenuItem
                      key={animal}
                    >
                      {animal}
                    </MenuItem>
                    {myData === animal && (
                      <>
                        {species.map((item: string, index: number) => (
                          <MenuItem
                            key={item}
                          >
                            {item}
                          </MenuItem>
                        ))}
                      </>
                    )}
                  </div>
                ))}
</Select>