OL (openlayers)

import React, {Component} from 'react';
import Map from 'ol/map.js';
import View from 'ol/view.js';
import TileLayer from 'ol/layer/tile.js';
import OSM from 'ol/source/osm.js';
import Heatmap from 'ol/layer/heatmap.js';
import VectorSource from "ol/source/vector";
import GeoJSON from "ol/format/geojson";
import proj4 from "proj4";
import './map.css'
 
class Test2 extends Component {
    constructor(props) {
        super(props);
    }
    state = { 
      center : [38.1333, 56.3],
      map: {},
    }
    componentDidUpdate(prevProps, prevState){
      if (this.state.center[0] != prevState.center[0] || this.state.center[1] != prevState.center[1]){
        this.state.map.render()
      }
    }
    componentDidMount(){
      this.setState({center: [38.1333, 56.3]})
      var heatmap_data = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [38.1333, 56.3]
            },
            properties: { title: "HeatmapPts", id: 111, name: "sample 1" }
          },
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [38, 56.4]
            },
            properties: { title: "HeatmapPts", id: 222, name: "sample 2" }
          },
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [38.3, 56.7]
            },
            properties: { title: "HeatmapPts", id: 333, name: "sample 3" }
          },
          {
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: [37, 56.45]
            },
            properties: { title: "HeatmapPts", id: 444, name: "sample 4" }
          },
        ]
      };
      var heatfeature = new VectorSource({
        features: new GeoJSON().readFeatures(heatmap_data, {
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:4326"
        })
      });
      
      var blur = 20;
      var radius = 10;
      
       var heatmaplayer = new Heatmap({
        title: "HeatMap",
        source: heatfeature,
        blur: blur,
        radius: radius,
        weight: function (feature) {
          return 10;
        }
      }); 
      proj4('EPSG:4326');
      var map = new Map({
        view: new View({
          projection: 'EPSG:4326',
          center: this.state.center,
          zoom: 8,
        }),
        layers: [
          new TileLayer({
            source: new OSM(),
          }),           
        ], 
        target: 'map',
      });
      map.addLayer(heatmaplayer); 
      this.setState({map: map});
    }
    render() 
    
    { 
        return ( 
            <div className='map' id='map' />
        );
    }
}
export default Test2;