Using a hook to determine the contents of annotations causes other annotations to detach from map

[edfungus]

Steps to Trigger Behavior

1. Create map with annotation component that relies on zustand/immer (add a boolean to the state) (distanceRings in example repo)
2. Add a regular annotation on the map (PointAnnotation in example repo)
3. Toggle the boolean
4. Move map and the regular annotation detaches

Link to Minimal Reproducible Example

https://github.com/edfungus/maplibre-example/tree/main

Map usage Main home screen

Expected Behavior

Map would move with all annotations staying in place.

Actual Behavior

Some annotations will detatch from screen and eventually whole map will be unresponsive

Screenshots (if applicable)

Issue demo:

https://github.com/user-attachments/assets/126d70f7-b9b0-4d52-8016-167af0675f66

Remove distanceRing component:

https://github.com/user-attachments/assets/6ec60e84-a9a2-4383-a94d-44f7329e070a

Version(s) affected

• Platform: iOS
• OS version: iOS 17.5
• Device type: iPhone 11 Pro / 15 Pro
• Emulator/ Simulator: both
• Development OS: MacOS 14.5
• maplibre-react-native Version: 10.0.0-alpha.8
• MapLibre GL version: ?
• React Native Version: 0.74.3

Additional context

Even without the Zustand/immer component, the PointAnnontation rubber bands a bit (even on device) so I feel like something with the rendering has changed. I have tried useMemo as well to reduce calculations but it didn't seem to affect anything.

The reason I'm inclined to think it has to do with Maplibre is because:

• Zustand/immer version stay the same
• Updated from 10 alpha 6 to alpha 8
• This similar issue https://github.com/maplibre/maplibre-react-native/issues/409

Happy to help test and debug as well. Took me a while to get the demo cut down from the app. I can't think of anything else to try atm