view city names on the map - reactjs

Question

I am trying to view the names of the cities on a d3.js v5 map
I tried some solutions so I am able to "just simply view the names of the cities " without the need of tooltip but I'm getting the following error in React "You can't update unmounted component".
Below my current code, which is in a class based component, I tried to use hooks to no avail, all this concepts are new to me.
// ... imports
class MapPathHolder extends Component {
constructor(props) {
super(props);
this.state = {
algyData: null,
toCity: "Algiers",
};
}
navigateToCity = () => {
this.props.history.push("/ToCityProducts");
};
componentWillMount() {
d3.json("algy.json").then((algyData) => {
this.setState({
algyData,
});
});
}
componentDidUpdate() {
const { width, height } = this.props;
const dz = this.state.algyData;
const svg = d3.select(this.refs.anchor);
var projection = d3
.geoEquirectangular()
// .parallels([29.5, 45.5])
.scale(1900.347057471)
.center([3, 40])
.translate([width / 1.4, height / 9]);
const path = d3.geoPath().projection(projection);
const g = svg.append("g");
g.append("g")
.attr("fill", "#4b4b4b")
.attr("cursor", "pointer")
.selectAll("path")
.data(
topojson.feature(dz, dz.objects.collection).features
)
.join("path")
.attr("stroke", "#A8846A")
.attr("stroke-width", 1)
.attr("d", path)
.on("click", (d) => {
this.props.postCity(d.properties.name);
this.navigateToCity();
})
.on("mouseover", function (d) {
d3.select(this).attr("fill", "orange");
})
.on("mouseout", function (d) {
d3.select(this).attr("fill", "#4b4b4b");
})
.append("title")
.text((d) => d.properties.name);
g.append("path")
.attr("fill", "none")
.attr("stroke-linejoin", "round")
.attr(
"d",
path(topojson.mesh(dz, dz.objects.collection, (a, b) => a !== b))
);
// error occurs after adding this line
g.append("title").text((d) => d.properties.name);
}
render() {
const { algyData, toCity } = this.state;
if (!algyData) {
return null;
}
return <g ref="anchor" />;
}
}
// ... mapState/DispatchToProps()
export default withRouter(
connect(mapStateToProps, mapDispatchToProps)(MapPathHolder));