OL with features

gistfile1.txt

import React, { useState, useEffect, useRef } from 'react';
import { Feature, Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import Overlay from 'ol/Overlay';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Point from 'ol/geom/Point';

function App() {
    const mapElement = useRef(null);
    const mapRef = useRef(null);

    const marker = new Overlay({
        position: fromLonLat([0, 0]),
        positioning: "center-center",
        element: document.getElementById("marker"),
        stopEvent: false
      });

    const view = new View({ center: [0, 0], zoom: 1 })

    const OSMLayer = new TileLayer({ source: new OSM() })

    const iconFeature = new Feature({
        geometry: new Point([0, 0]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500,
      });
      
    const vectorSource = new VectorSource({
        features: [iconFeature],
    });
    
    const vectorLayer = new VectorLayer({
        source: vectorSource,
    })

    useEffect(() => {
      if (!mapRef.current) {        
        mapRef.current = new Map({
          layers: [OSMLayer,vectorLayer],
          view: view,
          target: mapElement.current
        });        

        mapRef.current.addOverlay(marker)
      }

    }, [mapElement, mapRef]);
 
    return (
        <>
            <div ref={mapElement} style={{ width: "100%", height: "100vh" }} />
        </>
       

    );
}

export default App;