как я могу добавить в @ turf / circle в Reaction-Map-Gl, используя reactjs крючки

Question

Я новичок в reactjs и хотел бы добавить в библиотеку @ turf / circle, но я не уверен, как это реализовать. причина в том, что я хотел бы добавить радиус круга в маркере, а радиус окружности дерна, который можно рассчитать на основе «километров»

ниже кода, я беру отсюда: https://www.npmjs.com/package/@turf / круг

var center = [-75.343, 39.984];
var radius = 5;
var options = {steps: 10, units: 'kilometers', properties: {foo: 'bar'}};
var circle = turf.circle(center, radius, options);

//addToMap
var addToMap = [turf.point(center), circle

как я могу реализовать это в маркере react-map-gl?

это мой пример кода

    const MAPBOX_TOKEN = '' // Set your mapbox token here
    const useStyles = makeStyles({
        box: {
        position: "absolute",
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        zIndex: -1
        },
      })

    const MapHooks = forwardRef((props, ref) => {
        const [fleetDetail, setFleetDetail] = useState(null)
        const classes = useStyles()
        const sigfox = ApiSigfox()

        const [mapping, setMapping] = useState({
            width: '100%',
            height: '100%',
            longitude: -73.989308,
            latitude: 40.741895,
            zoom: 12
          });

        useImperativeHandle(ref, () => ({ 
            _goToNYC(e) {        
                Object.values(sigfox).map((docs) => {
                    return (e === docs.device) ? (
                        updateMap(docs)
                    ) : null
                })        
            }
        }));    

        //update Map
        function updateMap(test){
            // console.log(test.device + '-' + 'updateMap')
            const viewport = {
                ...mapping,
                longitude: test.lon,
                latitude: test.lat,
                zoom: 14,
                transitionDuration: 2000,
                transitionInterpolator: new FlyToInterpolator(),
                transitionEasing: d3.easeCubic
            };
            setMapping(viewport)
        }

        return (
            <div className={classes.box} style={{borderStyle: "solid"}}>

                <MapGL
                {...mapping}
                mapStyle="mapbox://styles/mapbox/dark-v10"
                onViewportChange={setMapping}
                mapboxApiAccessToken={MAPBOX_TOKEN}
                >
                    {Object.values(sigfox).map((docs) => {
                        return (docs.status !== 255 && (docs.lat >= -90 && docs.lat <= 90) ) ? 
                        <Marker 
                        key={docs.id} 
                        latitude={docs.lat} 
                        longitude={docs.lon} 
                        offsetTop={-35}
                        offsetLeft={-8}
                        >
                            <div>                        
                                <button onClick={e => {e.preventDefault(); 
 setFleetDetail(docs)}}>{docs.device}</button> 
                            </div>
                        </Marker>
                    : null
                    })} 
                    {/* display the pop up detail when click the icon */}
                    {fleetDetail ? (
                    <Popup
                    latitude={fleetDetail.lat}
                    longitude={fleetDetail.lon}
                    onClose={()=>{
                        setFleetDetail(null)
                    }}          
                    >
                    <div> 
                        <p>Device:{fleetDetail.device}</p>          
                        <p>Latitude:{fleetDetail.lat}</p>
                        <p>Longitude:{fleetDetail.lon}</p>
                        <p>status:{fleetDetail.status}</p>
                    </div>
                    </Popup>
                    ): null}               
                </MapGL>
            </div>
        );
    })

    export default MapHooks

Большое спасибо! :)