JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Show drawn polygon area</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>
<div id='map'></div>

</body>
</html>

JavaScript

var getFeature = function (id) {
	return {
      	id: id,
        type: 'Feature',
        properties: {},
        geometry: {"type":"Polygon","coordinates":[[[6.063839951991362,47.482905266092686],[6.023776895167445,47.51404538953004],[6.023776895167445,47.519138133623144],[6.063839951991362,47.482905266092686]]]}
      }
};
var loadManyFeatures = function (draw, number) {

	var features = [];
  
  for (var i = 0; i < number; ++i) {
  	features.push(getFeature(i));
  }

	var featureCollection = {
  	'type': 'FeatureCollection',
    'features': features
  };
  draw.set(featureCollection);
  
};
var loadTestFeatures = function (draw) {
  var testFeatures = [{
        id: 'test_0',
        type: 'Feature',
        properties: {},
        geometry: {"type":"Polygon","coordinates":[[[-91.90189497374908, 42.773736234685714],[-91.90240793610593, 42.75936982443784],[-91.87734537507265, 42.75936982443784],[-91.87683039095286, 42.77386224110063], [-91.90189497374908, 42.773736234685714]]]}
      }, {
      id: 'test_1',
        type: 'Feature',
        properties: {},
        geometry: {"type":"Polygon","coordinates":[[[-91.86206528540761, 42.77411425313397],[-91.86326691504105, 42.74527538623897],[-91.84264955240796, 42.745520906148215],[-91.84246285059201, 42.774377302196825], [-91.86206528540761, 42.77411425313397]]]}
      }];
  draw.add(testFeatures[0]);
  draw.add(testFeatures[1]);
};

mapboxgl.accessToken = 'pk.eyJ1IjoiZGV0LWpzY290dDExNiIsImEiOiJjamg5MDYweGwwN3AxMzZudnhvY3NqOGY4In0.Ge8_53DuWA_YmMlk4Phlmg';
/* eslint-disable */
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-v9', //hosted style id
    center: [-91.874, 42.760], // starting position
    zoom: 12 // starting zoom
});


var draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
        polygon: true,
        trash: true
    }
});
map.addControl(draw);
map.on('draw.create', function(e) { console.log(e)...