Unable to resize and drag circle

[itwaze]

I am using react-map-gl + mapbox-gl-circle. I displayed a circle but I cannot resize it and drag it.

But if I use mapbox-gl + mapbox-gl-circle = all is good.

import React from "react";
import MapboxCircle from "mapbox-gl-circle";
import MapGL from "react-map-gl";

const MAPBOX_ACCESS_TOKEN =
  "pk.eyJ1IjoiYWxlcGhyaSIsImEiOiJjamdwbHpycjIyZm45Mndud3AzamRibHpqIn0.ejAHwSGT6dcGxiDOrPCFLg";

export default function App() {
  const [viewport, setViewport] = React.useState({
    latitude: 6,
    longitude: 22,
    zoom: 12,
    bearing: 0,
    pitch: 0
  });

  const [mapRef, setMapRef] = React.useState(null);

  const myCircle = new MapboxCircle({ lat: 6, lng: 22 }, 2200, {
    editable: true,
    minRadius: 120,
    fillColor: "#29AB87"
  });

  if (mapRef !== null) {
    myCircle.addTo(mapRef.getMap());

    myCircle.on("centerchanged", function(circleObj) {
      console.log("New center:", circleObj.getCenter());
    });
    myCircle.once("radiuschanged", function(circleObj) {
      console.log("New radius (once!):", circleObj.getRadius());
    });
    myCircle.on("click", function(mapMouseEvent) {
      console.log("Click:", mapMouseEvent.point);
    });
    myCircle.on("contextmenu", function(mapMouseEvent) {
      console.log("Right-click:", mapMouseEvent.lngLat);
    });
  }

  return (
      <MapGL
        ref={e => setMapRef(e)}
        width="100%"
        height="100vh"
        mapStyle="mapbox://styles/mapbox/light-v9"
        mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
        latitude={viewport.latitude}
        longitude={viewport.longitude}
        zoom={viewport.zoom}
        bearing={viewport.bearing}
        pitch={viewport.pitch}
        onViewportChange={viewport => setViewport(viewport)}
      />
  );
}

Codesandbox react-map-gl example:
https://codesandbox.io/s/competent-feather-geo7c

Codesandbox mapbox-gl example:
https://codesandbox.io/s/react-and-mapbox-gl-2tnnx

[SwapnilSoni1999]

have you found any solution?