Jest or React Testing Library failed to render Material UI ToggleButton after using array.map , before using array.map it works, why?

Testing codes:

import { render, screen } from "@testing-library/react";
import App from "../App";

test("The 2nd button is rendered", () => {
  render(<App />);
  expect(screen.getByRole("button", { name: "2ND" })).toBeTruthy();
});

My codes (not working version, because I used array.map() to display each ToggleButton, if I don't use array.map(), just display the ToggleButton one by one, then the tests works. The problem is if I use array.map, the testing code cannot render those ToggleButtons at all, why this happened? How can I solve the problem? I want to use array.map() because the code is neat.

import React, { useState } from "react";
import { ToggleButton, ToggleButtonGroup } from "@mui/material";

const Controller = (props) => {
  const [item, setItem] = useState("first");

  const handleChange = (event, newItem) => {
    setItem(newItem);
  };

  const dataOfAll = props.allData;
  const buttonTextKeyArray = dataOfAll ? Object.keys(dataOfAll) : [];

  const buttonTexts = {
    first: "1ST",
    second: "2ND",
    ot: "OT",
    fullgame: "Full Game",
  };

  function clickHandler(e) {
    e.preventDefault();
    const keyOfObject = e.target.id;
    const singleRoundAllData = dataOfAll[keyOfObject];
    const singleRoundEventData = singleRoundAllData[3].events;
    props.onGetData(singleRoundAllData, singleRoundEventData);
  }

  return (
    <>
      <ToggleButtonGroup
        color="primary"
        value={item}
        exclusive
        onChange={handleChange}
        aria-label="Platform"
        onClick={clickHandler}
        sx={{ borderRadius: 3, width: "80%" }}
      >
        {buttonTextKeyArray.map((buttonTextKey) => {
          return (
            <ToggleButton
              variant="text"
              id={buttonTextKey}
              key={buttonTextKey}
              value={buttonTextKey}
              className="btn"
              sx={{
                border: "none",
                flexGrow: 1,
                color: "white",
                fontFamily: "Work Sans",
                textTransform: "none",
              }}
            >
              {buttonTexts[buttonTextKey]}
            </ToggleButton>
          );
        })}
      </ToggleButtonGroup>
    </>
  );
};

export default Controller;