How to reassign a ref to a component in App.js - reactjs

Question

I am new to react and i am trying to get the reference value from DisplayMapClass bellow is the code. The main objective is to get the MAP object from the bellow code.
DisplayMapClass.js
import * as React from 'react';
export class DisplayMapClass extends React.Component {
mapRef = React.createRef();
state = {
map: null
};
componentDidMount() {
const H = window.H;
const platform = new H.service.Platform({
apikey: "{enter api key}"
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
this.mapRef.current,
defaultLayers.vector.normal.map,
{
center: { lat: 50, lng: 5 },
zoom: 4,
pixelRatio: window.devicePixelRatio || 1
}
);
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);
this.setState({ map });
}
componentWillUnmount() {
this.state.map.dispose();
}
render() {
return (
<div ref={this.mapRef} style={{ height: "500px" }} />
);
}
}
When I reassign the ref the whole page breaks so i don't know what i am doing wrong.
const map = <DisplayMapClass ref={"newRef"}/>
Bellow is the code for App.js
App.js
import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'
import Button from '#mui/material/Button';
import TextField from '#mui/material/TextField';
import {BounceLoader, BarLoader, BeatLoader} from 'react-spinners'
import {DisplayMapClass} from './DisplayMapClass';
const H = window.H;
function App() {
const [isLoading, setLoading] = useState(false)
const map = <DisplayMapClass ref={"newRef"}/>
const asyncFunc = async () => {
setLoading(true);
const response = await fetch('http://000.000.000.000:000/test/8.8.8.8' );
const data = await response.json();
for(var x in data){
addMarker(map, x["lat"], x["lng"])
}
setLoading(false)
}
const addMarker = (map, x, y) => {
var marker = new H.map.Marker({"lat": x, "lng": y})
map.addObject(marker);
}
return (
<div className="App">
{ isLoading ?
<header className="App-header">
<p>please type an ip address and when done press the button</p>
<TextField
sx=
{
{
input:
{
color: 'white'
}, root:
{
color: 'white'
}, floatingLabelFocusStyle:
{
color: "white"
}
}
}
id="ipTextArea" label="Enter an IP address" variant="filled"
/>
<Button onClick={asyncFunc} variant="outlined">Map My Stalkers</Button>
<BarLoader/>
</header>
:
<header className="App-header">
<p>please type an ip address and when done press the button</p>
<TextField
sx=
{
{
input:
{
color: 'white'
}, root:
{
color: 'white'
}, floatingLabelFocusStyle:
{
color: "white"
}
}
}
id="ipTextArea" label="Enter an IP address" variant="filled"
/>
<Button onClick={asyncFunc} variant="outlined">Map My Stalkers</Button>
</header>
}
<p> <br /> </p>
<div> {map} </div>
</div>
);
}
export default App;