I have a button that when clicked wants to insert an element before it. here is the code;

<div><button onClick={(e) => {
    let container = (e.target as HTMLElement).parentNode?.parentNode;
    if (container) {
        let div = document.createElement("div")
        div.classList.add(styles.card)
        container.insertBefore(div, container.lastChild)
        ReactDOM.render(<MyReactElement/>, div)
    }
}}>add</button></div>

This feels terribly sloppy and I want to refactor it so that it uses either all react-dom or all dom, I think this will be a more efficient method. The method above is the only way i've been able to figure out how to achieve the result I am looking for.