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>