Why am I still getting a “Warning: Each child in a list should have a unique “key” prop.”

I see the component in react dev tools and each of the Summaries has a unique key on it. But the warning won’t go away.

const summaryData = [
    {
      id: 1,
      box: "one",
      sprite: "html5",   
    },
    {
      id: 2,
      box: "two",
      sprite: "envelope",
    },
    {
      id: 3,
      box: "three",
      sprite: "wordpress",
    },
    {
      id: 4,
      box: "four",
      sprite: "tongue",
    },
  ];

{summaryData.map((summary) => (
            <Summaries
              key={`box${summary.id}`}
              box={summary.box}
              sprite={summary.sprite}
            />
          ))}