How to create a Table component for marker which shown after click

Question

I have location marker on map, and after click on the marker the given marker information is display in table view But i have created that table using the document.createElement();

Now i want to change the popup window with the mui table where i have only to pass the marker information to it

Please help me to solve my problem

Below is my code which located in .ts file

getPopupContent(markerData: {}) {
        var popupHTML = '';       
        var table = document.createElement("table");
        table.style.border = "1px solid black";
        
        var infoData = markerData;
        for (let k in infoData) {
            var tr = document.createElement("tr");
            var paramName = k;
            var paramValue = infoData[paramName];
            var paramNameTd = document.createElement("td");
            if (paramName == "totalCount") {
                paramNameTd.innerHTML = "Total Count";
            }
            if (paramName == "name") {
                paramNameTd.innerHTML = "Name";
            }
            var paramValueTd = document.createElement("td");
            paramValueTd.innerHTML = paramValue;
            tr.appendChild(paramNameTd);
            tr.appendChild(paramValueTd);
            tr.style.border = "1px solid black";
            paramNameTd.style.border = "1px solid black";
            paramValueTd.style.border = "1px solid black";
            paramNameTd.style.fontSize = "12px";
            paramValueTd.style.fontSize = "12px";
            paramNameTd.style.padding = "3px";
            paramValueTd.style.padding = "3px";
            paramValueTd.style.fontStyle = "italic";
            paramValueTd.style.textAlign = "right";
            table.append(tr);
        }
        popupHTML = table.outerHTML;
        return popupHTML;
    }
}

The getPopupContent() is called when clicked on the marker I want to create a Marker.tsx file which can show this data, and want to remove from the code