why react component iterated but overlapping DOM - reactjs

Question

Child Component using WebSocket to get data from server
this working fine,
output of the code is correct when passing string
import { useContext, useEffect, useState } from "react";
import { WebsocketContext } from "./Wsconnection";
import React from "react";
const Allotments = ({ num }) => {
const [isReady, socket] = useContext(WebsocketContext);
const [allotdata, setAllotdata] = useState({});
useEffect(() => {
if (isReady) {
socket.send(JSON.stringify({ type: "get_allotment_details", number: num }));
socket.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.type === "get_allotment_details") {
const altdata = data.alloted_details[0];
setAllotdata({ customer: altdata.prq__customer__name });
}
};
}
return () => {};
}, [isReady, num, socket]);
return (
<div>
<h5>{allotdata?.customer}</h5>
</div>
);
};
export default Allotments;
Parent Component
import React from "react";
import Allotments from "./Allotments";
const init_alloted = JSON.parse(document.getElementById("reporting").dataset.alloted) || [];
export const Alloted = () => {
const allots = init_alloted.map((allot, idx) => {
return (
<div key={idx}>
<Allotments num={allot.number} key={idx} />
</div>
);
});
return <div className="col">{allots}</div>;
};
i tried passing text string then, everything works fine