How to use the react-native-maps.AnimatedRegion function in react-native-maps

constructor(props) {
    super(props);

    this.state = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      routeCoordinates: [],
      distanceTravelled: 0,
      prevLatLng: {},
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: 0,
        longitudeDelta: 0
      })
    };
  }

constructor(props) {
        super(props);

        mapintegration = this;
        this.state = {
            region: {
                latitude: LATITUDE,
                longitude: LONGITUDE,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA,
            },
            coordinate: new AnimatedRegion({
                latitude: LATITUDE_DEST1,
                longitude: LONGITUDE_DEST1,
            }),
            latitudeDestination: LATITUDE_DEST1,
            longitudeDestination: LONGITUDE_DEST1,
        };
    }

constructor(props) {
    super(props);

    this.state = {
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
      }),
    };
  }

constructor(props) {
    super(props);
    this.state = {
      coordinate: new AnimatedRegion({
        latitude: 46.005063,
        longitude: 8.956442,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02
      }),
    }
  }

constructor(props) {
        super(props);

        mapStyle = this;
        this.state = {
            region: {
                latitude: LATITUDE,
                longitude: LONGITUDE,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA,
            },
            coordinate: new AnimatedRegion({
                latitude: LATITUDE_DEST1,
                longitude: LONGITUDE_DEST1,
            }),
            latitudeDestination: LATITUDE_DEST1,
            longitudeDestination: LONGITUDE_DEST1,
        };
    }

nextProps.vehicles[route].forEach((nextVehicle) => {
							nextVehicle.animated = new MapView.AnimatedRegion({
								latitude: nextVehicle.lat,
								longitude: nextVehicle.lon,
							})
						})

            this.getChildren().map((marker: Marker | MarkerAnimated) => new AnimatedRegion(marker.props.coordinate)),
        }, () => {

const animations = markers.map((m, i) =>
      getMarkerState(panX, panY, scrollY, i)
    );

    this.state = {
      panX,
      panY,
      animations,
      index: 0,
      canMoveHorizontal: true,
      scrollY,
      scrollX,
      scale,
      translateY,
      markers,
      region: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }),
    };
  }

clusters: clusters.map((i, index) => ({
          ...i,
          center: new AnimatedRegion(this.clusters[parents[index]].center),
        }))
      }, () => {

function AnimatedMarkers({ provider }: any) {
  const [coordinate] = React.useState(
    new AnimatedRegion({
      latitude: LATITUDE,
      longitude: LONGITUDE,
    })
  );

  let marker: any;

  const animate = () => {
    const newCoordinate = {
      latitude: LATITUDE + (Math.random() - 0.5) * (LATITUDE_DELTA / 2),
      longitude: LONGITUDE + (Math.random() - 0.5) * (LONGITUDE_DELTA / 2),
    };

    if (Platform.OS === 'android') {
      if (marker) {
        marker._component.animateMarkerToCoordinate(newCoordinate, 500);