JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.4/mapbox-gl-draw.css' type='text/css' />

<div id='map'></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

var map = new mapboxgl.Map({
  container: 'map',
  style: 'http://osm-liberty.lukasmartinelli.ch/style.json',
  center: [-96, 37.8],
  zoom: 1,
  hash: true
});

var Draw = new MapboxDraw();
map.addControl(Draw, 'top-left');

map.on('draw.modechange', (e) => {
  const data = Draw.getAll();
  if (Draw.getMode() == 'draw_polygon') {
    var pids = []
    const lid = data.features[data.features.length - 1].id
    data.features.forEach((f) => {
      if (f.geometry.type === 'Polygon' && f.id !== lid) {
        pids.push(f.id)
      }
    })
    Draw.delete(pids)
  }
});