[Bug]: Camera does not animate in expo web app

[dusktreader]

Mapbox Implementation

Maplibre

Mapbox Version

11.4.0

React Native Version

0.76.1

Platform

Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from 'react';
import { Alert, Platform } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { ButtonGroup } from '@rneui/base';

Mapbox.setAccessToken("pk.eyJ1IjoiZHV...");

const layerStyles = {
  building: {
    fillExtrusionColor: '#aaa',

    fillExtrusionHeight: [
      'interpolate',
      ['linear'],
      ['zoom'],
      15,
      0,
      15.05,
      ['get', 'height'],
    ],

    fillExtrusionBase: [
      'interpolate',
      ['linear'],
      ['zoom'],
      15,
      0,
      15.05,
      ['get', 'min_height'],
    ],

    fillExtrusionOpacity: 0.6,
  },
};

const styles = {
  matchParent: { flex: 1 },
};

class FlyTo extends React.Component {
  static SF_OFFICE_LOCATION = [-122.400021, 37.789085];

  static DC_OFFICE_LOCATION = [-77.036086, 38.910233];

  static ZERO_ZERO = [0, 0];
  static ZERO_TEN = [0, 10];
  static TEN_ZERO = [10, 0];

  constructor(props) {
    super(props);

    this.state = {
      location: FlyTo.SF_OFFICE_LOCATION,
    };

    this._flyToOptions = [
      { label: 'SF', data: FlyTo.SF_OFFICE_LOCATION },
      { label: 'DC', data: FlyTo.DC_OFFICE_LOCATION },
      { label: '0,0', data: FlyTo.ZERO_ZERO },
      { label: '0,10', data: FlyTo.ZERO_TEN },
      { label: '10,0', data: FlyTo.TEN_ZERO },
    ];

    this.onFlyToPress = this.onFlyToPress.bind(this);
    this.onFlyToComplete = this.onFlyToComplete.bind(this);
  }

  onFlyToPress(i) {
    this.setState({ location: this._flyToOptions[i].data, selectedIndex: i });
  }

  onFlyToComplete() {
    Alert.alert('Fly To Animation Completed', 'We did it!!!');
  }

  render() {
    return (
      <>
        <ButtonGroup
          buttons={this._flyToOptions.map((i) => i.label)}
          selectedIndex={this.state.selectedIndex}
          onPress={(i) => this.onFlyToPress(i)}
        />
        <Mapbox.MapView style={styles.matchParent}>
          <Mapbox.Camera
            zoomLevel={16}
            animationMode={'flyTo'}
            animationDuration={6000}
            centerCoordinate={this.state.location}
          />

          {Platform.OS !== 'web' && (
            <>
              <Mapbox.UserLocation />

              <Mapbox.FillExtrusionLayer
                id="building3d"
                sourceLayerID="building"
                style={layerStyles.building}
              />
            </>
          )}
        </Mapbox.MapView>
      </>
    );
  }
}

export default FlyTo;

Observed behavior and steps to reproduce

This is occuring when running a web instance of a react-native/expo app.

I created a brand new react-native/expo app. I then pasted the "FlyTo" example code into index.tsx. The app starts fine, and the map is fully interactive. However, pressing the buttons to fly to a new location has no effect whatsoever.

Expected behavior

I expect the map to animate a change of view when any of the buttons are pressed in the "FlyTo" example.

Notes / preliminary analysis

I originally was having this issue in a more developed app (not an example). After fiddling with it for a long time, I decided to see if one of the examples was even working. It is not.

Additional links and references

No response

[dusktreader]

It's worth noting that creating a refrence object for the camera via useRef() and then calling the setCamera() method does have the expected behavior.