JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<div id="map" style="width: 100%; height: 450px;"></div>

JavaScript

var source = new ol.source.Vector();
var interaction = new ol.interaction.DragBox({
    condition: ol.events.condition.ModifierKeys,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: [0, 0, 255, 1]
        })
    })
});

interaction.on('boxend', function (evt) {
    var geom = evt.target.getGeometry();
    console.log(geom);
    var feat = new ol.Feature({
        geometry: geom
    });
    source.addFeature(feat);
});

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: source
        })
    ],
    view: new ol.View({
        center: [0, 0],
        zoom: 2,
        projection: 'EPSG:3857',
    }),
    interactions: [
        interaction
    ]
});