如何从状态数组中的对象动态加载组件?

When I make a selection from the dropdown I saved the selected value to type then when I click the button I add an object to drums, I map over thee drums and based on the type I want to render the component with the same name.

Sandbox here

import React, { useState } from "react";
import uuid from "react-uuid";
import "./styles.css";

const Snare = () => {
  return <div>Snare</div>;
};

const Gong = () => {
  return <div>Gong</div>;
};

export default function App() {
  const [drums, setDrums] = useState([]);
  const [type, setType] = useState();
  return (
    <div className="App">
      {drums.map((Drum, index) => (
        <Drum.type /> // Why cant I use `.type`?
      ))}
      <label>
        Drum type to add:
        <select onChange={e => setType(e.target.value)} value={type}>
          <option value="">Select...</option>
          <option value="Snare">Snare</option>
          <option value="Gong">Gong</option>
        </select>
        <button
          onClick={() => {
            setDrums([...drums,
              {
                id: uuid(),
                type
              }
            ]);
          }}
        >
          Add drum
        </button>
      </label>
    </div>
  );
}