Openlayers Map Click Event not getting called in ReactJS

Question

Problem: OpenLayers(v6.3) MAP is visible in REACTJS(16.13) but click event on MAP is not getting called.

Purpose: I want to place a marker and handle its click event to show some POPUP with data.

Code: Code included is though self explanatory; here is a quick explanation

[in ComponentWillUpdate()] MapComponent shown here receive {currentLocation} as property and moves map to that location. It then places a marker with custom Image. Its all working.

[in ComponentDidMount()] DIV ID reference is used to pass OLMAP reference.

I tried to register OLMAP click event in both ComponentDidMount() as well as ComponentWillUpdate() but it is not doing anything though it is getting executed as last console message gets printed.

Only problem in this code is OL-MAP CLICK event Handling. What is wrong. Help will be appreciated.

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';    
    import Map from 'ol/Map';
    import View from 'ol/View';
    import TileLayer from 'ol/layer/Tile';
    import OSM from 'ol/source/OSM';
    import VectorLayer from 'ol/layer/Vector';
    import VectorSource from 'ol/source/Vector';
    import Feature from 'ol/Feature';
    import {Style,Icon} from 'ol/style';
    import Point from 'ol/geom/Point';
    
    import { fromLonLat } from 'ol/proj.js';
    import LOCPNG from '../../../assets/images/location.png';
    class MapComponent extends Component {
    
      constructor(props) {
        // console.log('[MC.js] constructor');

    super(props);
    this.olMap = null;
    this.mapRef = null;
    this.setMapRef = element => {
      this.mapRef = element;
    }
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('[MC.js] CDUpdate');
  }
  componentWillUpdate(nextProps) {
    // console.log('[MC.js] CWU');
    const mapView = this.olMap.getView();
    mapView.animate({
      center: nextProps.currentLocation,
      duration: 2000,
      zoom: 10
    });

    this.makeMarker(nextProps.currentLocation, 0);

    this.olMap.on('click',(evt) => {
      console.log(evt);
      console.log(evt.pixel);
      const feature = this.olMap.forEachFeatureAtPixel(evt.pixel, (feature) => feature);
      if(feature){
        console.log('PopUp');
      }
    });
  }
  makeMarker = (location, index) => {
    let marker = new Feature({
      geometry: new Point(location)
    });
    marker.setStyle(new Style({
      image: new Icon(({
        // crossOrigin: 'anonymous',
        src: LOCPNG,
        // enter code here`enter code here`
      }))
    }));
    let vectorSource = new VectorSource({ features: [marker] })
    var markerVectorLayer = new VectorLayer({
      source: vectorSource,
    });
    this.olMap.addLayer(markerVectorLayer);
  }

  componentDidMount() {
    // console.log('[MC.js] CDM');
    const mapDOMNode = ReactDOM.findDOMNode(this.mapRef);
    // console.log('[MC.js] CDM',mapDOMNode);
    this.olMap = new Map({
      target: mapDOMNode,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: this.props.currentLocation,
        zoom: 10
      })
    });

    this.olMap.on('click',evt=>{
      console.log(evt);
      console.log(evt.pixel);
      const feature = this.olMap.forEachFeatureAtPixel(evt.pixel, (feature) => feature);
      if(feature){
        console.log('PopUp');
      }
    });


    console.log('[MC.js] CDM');
  }

  render() {
    // console.log('[MC.js] render()');
    const styles = { height: '100%', width: '100%' }
    return (
      <React.Fragment>
        <div style={styles} ref={this.setMapRef}></div>
      </React.Fragment>
    )
  }
}

export default MapComponent;