How to use the @turf/center.default function in @turf/center

viewport: {
        latitude,
        longitude,
        zoom,
      }
    } = this.state;

    const mapboxInitConfig: any = {
      center: [longitude, latitude],
      container: 'SHST-Road-Closure-Map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom
    };
    if (AppExtent && AppExtent.length === 4) {
      mapboxInitConfig.bounds = AppExtent;
      mapboxInitConfig.center = center(bboxPolygon(AppExtent)).geometry.coordinates;
      mapboxInitConfig.zoom = 10;
    }
    this.mapContainer = new mapboxgl.Map(mapboxInitConfig);

    this.mapContainer.on('move', this.handleMapMove);
    this.mapContainer.on('mousemove', () => {
      // set pointer style to crosshair when isDrawing is toggled
      this.mapContainer.getCanvas().style.cursor = this.state.isDrawing ? 'crosshair' : '';
    })
    this.mapContainer.on('click', this.handleMapClick);
    this.mapContainer.on('mousemove', this.handleShowPossibleDirections)
    this.mapContainer.addControl(
      new mapboxgl.NavigationControl()
    );
    this.mapContainer.addControl(
      new MapboxGeocoder({

createGeometryFromGeomFunction: (ft) => {
        let type = geometryFunctions[ft.style.geometry] && geometryFunctions[ft.style.geometry].type || ft.geometry.type;
        let coordinates = ft.geometry.coordinates || [];
        switch (ft.style.geometry ) {
        case "startPoint": coordinates = head(coordinates); break;
        case "endPoint": coordinates = last(coordinates); break;
        case "centerPoint": coordinates = turfCenter(ft).geometry.coordinates; break;
        default: break;
        }
        return {type, coordinates};
    },
    /**