How can I have several DrawControls on the same map?

[GneyHabub]

I need a map where I will be able to draw 2 different types of polygons. I was thinking about having two DrawControls on the same map with different styles:

<Map 
  initialViewState={{
    longitude: 1.8,
    latitude: 42.7,
    zoom: 9
  }}
  mapboxAccessToken={import.meta.env.VITE_MAPBOX_URL}
  mapStyle="mapbox://styles/mapbox/light-v11"
 >
  <DrawControl
    displayControlsDefault={false}
    controls={{
    polygon: true,
    trash: true
    }}
  />
  <DrawControl
    displayControlsDefault={false}
    controls={{
    polygon: true,
    trash: true
    }}
    style={{...}}
  />
  <NavigationControl />
</Map>

DrawControl here is the component from this example. This doesn't really seem to work. Is there a proper way to achieve what I'm trying to achive?