JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css">
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script>
<div id="map" class="map"></div>

JavaScript

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      window.map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [0,0],
          zoom: 7
        })
      });
       geometryFunction = function(coordinates, geometry) {
    if (!geometry) {
      geometry = new ol.geom.LineString(null);
    }
    
    var line = {
  "type": "Feature",
  "properties": {
  },
  "geometry": {
    "type": "LineString",
    "coordinates": coordinates
  }
};
	var curved = turf.bezier(line);
    geometry.setCoordinates(curved["geometry"]["coordinates"]);
    return geometry;
  };
  draw = new ol.interaction.Draw({
    source: vectorSource,
    type: 'LineString',
    geometryFunction: geometryFunction
  });
  map.addInteraction(draw);