Mapbox Gl Js Multiple Popups Overlapping Each Other

Question

I am using Mapbox Gl Js Library to render Mapbox, add Sources, display Layers and adding Popups to those layers.

I am adding Popups on click using queryRenderedFeatures like below, but if there are multiple layers and features of that at a point, it is opening multiple popups which are overlapping each other like when I close one Popup then only I can get to see another Popup.

This is my Popup function:

const addPopup = useCallback( async (e: MapMouseEvent, id: string, legendType: string, name:string) => { 

const features = map.current?.queryRenderedFeatures(e.point, { layers: [id] });  
if (
    features?.length &&
    features[0].properties &&
    Object.keys(features[0].properties).length > 0
  ) {
    const layerId = (() => {
      switch (legendType) {
        case 'color':
          return id.slice(0, -6);
        case 'icon':
          return id.slice(0, -5);
        default:
          return id;
      }
    })();

    const data = await fetchPopupColumns(layerId, selectedProject?.id as string, accessToken);

    if (data) {
      const popupNode = document.createElement('div');
      ReactDOM.render(
        <Popup
          features={features as unknown as IGeoJsonFeature[]}
          columns={data}
          name={name}
          id={id}
        />,
        popupNode
      );
      new mapboxgl.Popup({ className: `popup-${id}`, closeButton: false })
        .setDOMContent(popupNode)
        .setLngLat(e.lngLat)
        .addTo(map.current!)
        .setMaxWidth('500px');
    }
  }
},
[accessToken, map, selectedProject?.id]
);

Is there any functionality in Mapbox GL Js that auto adjusts the Popups when there are multiple Popups at a point or How can I achieve that functionality?

I am expecting the anchor position of multiple Popups to auto adjust as when we click on a point and multiple popups are opened the popups should be auto adjusted with different anchor options like 'top', 'bottom', 'left', 'right', etc.