How to convert mapboxgl feature coordinates into coordinates compatible with CesiumJS in ReactJS app?

Question

I'm showcasing two maps in my application. When the user clicks a feature on the mapbox map, i'm getting the feature object and retrieving the polygon coordinates of the feature. I want to convert the coordinate format into a format suitable for CesiumJS. I'm using Google Photorealistic 3D tiles with Cesium to render satellite 3d images. I'd like to then render the mapboxgl feature polygon into my CesiumJS map.

How can i do this?

I tried the code below:

const convertedCoords = Cesium.Cartesian3.fromDegreesArray(activePropertyCoordinatesFromMapbox.flat(2));

viewerRef.current.entities.add(
        new Cesium.Entity({
          polygon: {
            hierarchy: convertedCoords,
            material: Cesium.Color.YELLOW.withAlpha(0.6),
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
          },
        })
      );

This seems to work for some polygons where it's rendering the full polygon. Other times, it's rendering part of it.

Below is the code that's running it.

useEffect(() => {
    if (
      !viewerRef.current ||
      !haveTilesLoaded ||
      !activePropertyCoordinatesFromMapbox
    )
      return;
    try {
      const convertedCoords = Cesium.Cartesian3.fromDegreesArray(
        activePropertyCoordinatesFromMapbox.flat(2)
      );
      viewerRef.current.entities.add(
        new Cesium.Entity({
          polygon: {
            hierarchy: convertedCoords,
            material: Cesium.Color.YELLOW.withAlpha(0.6),
            classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
          },
        })
      );
    } catch (error) {
      console.log("error", error);
      setError(error);
    }
  }, [activePropertyCoordinatesFromMapbox]);

  useEffect(() => {
    setActivePropertyIdToShowInCesium(propertyId);
    if (viewerRef.current || !geo_point) return;

    viewerRef.current = new Cesium.Viewer("cesiumContainer", {
      animation: false,
      timeline: false,
      fullscreenButton: false,
      vrButton: false,
      geocoder: false,
      homeButton: false,
      infoBox: false,
      sceneModePicker: false,
      selectionIndicator: false,
      baseLayerPicker: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      globe: false,
    });
    const tileset = new Cesium.Cesium3DTileset({
      url: GOOGLE_TILESET_URL,
      showCreditsOnScreen: true,
    });
    viewerRef.current.scene.primitives.add(tileset);
    viewerRef.current.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(
        propertyCoords.lng,
        propertyCoords.lat,
        500
      ),
    });
    const altitudeOffset = 50;
    const pinLocation = Cesium.Cartesian3.fromDegrees(
      propertyCoords.lng,
      propertyCoords.lat,
      altitudeOffset
    );

    viewerRef.current.entities.add({
      position: pinLocation,
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
      label: {
        text: propertyName,
        font: "14pt monospace",
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9),
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
      },
    });
    setHaveTilesLoaded(true);
    return () => {
      viewerRef.current.destroy();
      setActivePropertyIdToShowInCesium();
      setActivePropertyCoordinatesFromMapbox();
      setHaveTilesLoaded(false);
    };
  }, []);