从JSON对象创建SVG时，React未从map循环返回子对象

import React from 'react';

const json = [
  { id: 1, name: 'Circle', cx: 50, cy: 50, r: 30 },
  { id: 2, name: 'Rectangle', x: 100, y: 100, width: 50, height: 50 },
  // 更多SVG对象...
];

const App = () => {
  return (
    <svg>
      {json.map((item) => {
        if (item.name === 'Circle') {
          return (
            <circle
              key={item.id}
              cx={item.cx}
              cy={item.cy}
              r={item.r}
            />
          );
        } else if (item.name === 'Rectangle') {
          return (
            <rect
              key={item.id}
              x={item.x}
              y={item.y}
              width={item.width}
              height={item.height}
            />
          );
        }
        // 更多SVG元素...
        return null;
      })}
    </svg>
  );
};

export default App;