OpenLayers map with overlay image

Map.js

import 'ol/ol.css';
import Map from 'ol/map';
import View from 'ol/view';
import TileLayer from 'ol/layer/tile';
import OSM from 'ol/source/osm';
import Proj from 'ol/proj';
import Projection from 'ol/proj/projection';
import Coordinate from 'ol/coordinate';
import ImageStatic from 'ol/source/imagestatic';
import Image from 'ol/layer/image';
import Extent from 'ol/extent';
import Attribution from 'ol/attribution';
import Overlay from 'ol/overlay';

const coordinate = [16.3725, 48.208889];

    let map = new Map({
        target: 'map',
        layers: [
            new TileLayer({
                source: new OSM()
            })
        ],
        view: new View({
            center:  Proj.fromLonLat(coordinate),
            zoom: 4
        })
    });
    let markerDiv =  $("#marker")[0];

    let marker = new Overlay({
        position:  Proj.fromLonLat(coordinate),
        positioning: 'center-center',
        element: markerDiv,
        stopEvent: false
    });
    map.addOverlay(marker);


//HTML Stuff:
  <div id="map" class="map"></div>
     <div style="display: none;">
         <img src ="overlayimage.jpg" id="marker" title="Marker">
     </div>
 </div>

MapwithStaticImageLayer.js

//this displays an image on a map given a set of coordinates for the left bottom corner and the right top where the image should be displayed
coordinates.leftBottom =  [long,lat];
coordinates.rightTop = [long, lat]; //Openlayers needs longitude first

console.log("coordinate in getMapVar", coordinates);

    let arr = [coordinates.leftBottom, coordinates.rightTop];
    let extent = coordinates.leftBottom.concat(coordinates.rightTop);
    extent = transform(extent);

function transform(extent) {
    return Proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
} 

const staticImageLayer = new ImageLayer({
        source: new StaticImage({
            opacity: imageOpacity,
            url: 'image.jpg',
            imageExtent: extent,
            projection: 'EPSG:3857',
        }),
        zIndex: 200,
    });

    let map = new Map({
        target: 'map',
        layers: [
            new TileLayer({
                source: new OSM()
            })
        ],
        view: new View({
            center:  Proj.fromLonLat(coordinate),
            zoom: 4
        })
    });

    map.addLayer(staticImageLayer);