Mapbox - Custom Marker Popup not showing

I am using regular Mapbox GL with React and I am having trouble getting popups to show on custom markers.

I have tried using addSource and addLayer with a map.on("click") event for a popup and it works. But when I try with just a custom marker, the popup created has the content I want to display passed to it, but logs _container and _map as undefined, so it doesn't display.

The code below is within a function component.

The popup function I'm using works for default Mapbox layer items, but not my custom markers.

const popUpRef = useRef(new mapboxgl.Popup({ offset: 15 }))

function createPopUp(currentFeature) {
    const popupNode = document.createElement("div")

    const root = createRoot(popupNode)
    root.render(
        <Popup price={currentFeature.price} />
    )
    popUpRef.current
        .setLngLat(currentFeature.geometry.coordinates)
        .setDOMContent(popupNode)
        .addTo(map.current)
}

Default markers that work with the popup:

useEffect(() => {
    if (!map.current) return; // wait for map to initialize
    map.current.on('load', () => {
        map.current.addSource('data', {
            'type': 'geojson',
            'data': data
        });
        map.current.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'data'
        });

        map.current.on("click", e => {
            const features = map.current.queryRenderedFeatures(e.point, {
                layers: ["unclustered-point"]
            });
            if (!features.length) return;
            const clickedPoint = features[0];
            createPopUp(clickedPoint)
        })
    })
},[])

The custom markers that I need to work with the popup:

const markerClicked = (feature) => {
    createPopUp(feature) 
};

const Marker = ({ onClick, children, feature }) => {
    const _onClick = () => {
        onClick(feature);
    };

    return (
        <button onClick={_onClick} className="marker">
            {children}
        </button>
    );
}

useEffect(() => {
    if (!map.current) return; // wait for map to initialize
    map.current.on('load', () => {
        data.features.forEach((feature) => {
            const ref = React.createRef();
            ref.current = document.createElement("div");
            const priceJSX = <Typography variant='p'>{feature.price}</Typography>
            const root = createRoot(ref.current)
            root.render(
                <Marker onClick={markerClicked} feature={feature} children={priceJSX} />
            );
            new mapboxgl.Marker(ref.current)
                .setLngLat(feature.geometry.coordinates)
                .addTo(map.current);
        });
    })
}, [])

When I console log the popUpRef for the custom markers, I see that _container and _map are undefined, but with the default markers they are defined, even though I'm using the same function.

I even tried passing in the exact feature I get from the map.on("click") function to the onClick for the custom marker and it still doesn't work.

Can anybody see why I am having trouble getting popups to show on custom markers?