How to keep my mapview.markers from rescaling when calling setGlobalState?

So i am using react native or more specifically expo mapview to render a mapview component with some custom markers. Theese markers are then connected to a scrollview in a way such that as when the scrollview is scrolled different markers corresponding to what is shown is then rescaled, aka gets 1.5x bigger this is also periodic so when im in between two they are both like 1.25x bigger code for this map with markers show below.

        <MapView 
            ref={refMap}
            style={styles.map}
            region={state.region}
            scrollEnabled={true}
            zoomEnabled={true}
            zoomTapEnabled={false}
            rotateEnabled={true}
            showsPointsOfInterest={false}
            moveOnMarkerPress={false} // android only
            minZoomLevel={13}
            maxZoomLevel={16}
            onMapReady={(resetMap)}
            //onMarkerPress={onMarkerPress}
            >
              {/* creates markers on map with unique index; coordinates, img, title from mapData*/}
            {state.markers.map((marker, index) => {
              const scaleStyle = {    // creates a scaleStyle by transforming/scaling the marker in func interpolations
                transform: [
                  {
                    scale: interpolations[index].scale,
                  },
                ],
              };
              return (
                <MapView.Marker 
                key={index} 
                coordinate={marker.coordinate}
                  onPress={onMarkerPress}
                  
                >
                  <Animated.View style={styles.markerWrap}>
                    <Animated.Image 
                    source={marker.image} 
                    style={[styles.marker, scaleStyle]} // adding the scaleStyle to the marker img (which is the marker)
                    //resizeMode= 'cover'
                    >
                      
                    </Animated.Image>
                  </Animated.View>
                </MapView.Marker>
              );
            })}
            </MapView>
    //function codes seen here

let markerAnimation = new Animated.Value(0);
  
      //console.log(markerAnimation)
      // Called when creating the markers (markers and cards has matching indexes)
      // Setting inputRange (card index/position) for the animation, mapping it to an outputRange (how the marker should be scaled)
      const interpolations = state.cards.map((card, index) => {
        const inputRange = [
          (index - 1) * Dimensions.get('window').width,
          index * Dimensions.get('window').width,
          ((index + 1) * Dimensions.get('window').width),
        ];
    
        const scale = markerAnimation.interpolate({
          inputRange,             //card index/positions [before, present, after]

          outputRange: [1, 1.5, 1], //scales the marker [before, present, after]
                                                  
          extrapolate: "clamp"
        });
    
        return { scale };
      });
      
      // Called when a marker is pressed
      const onMarkerPress = (mapEventData) => {
        
        const markerIndex = mapEventData._targetInst.return.key; // returns the marker's index
        
        let x = (markerIndex * Dimensions.get('window').width);  // setting card x-position
        
        refCards.current.scrollTo({x: x, y: 0, animated: true}); // scroll to x-position with animation
      };

And whilst this whole interaction has been working exactly like i imagined i have this button that takes me to another page in the app which on arrival needs to fetch some data trough an api call. and this data depends on the index of the scrollview. In this other screen where the scrollview is also present i just use the onMomentumScrollEnd to set a global state value to the corresponding value(code for this global state shown below) this works but i would like to do exacty the same thing in the screen containing the map. but whenever a global state change is called the scaling "resets" so that the first one is the one "highlighted" even tho the scrollview is somewhere completly different.

//this is a index.js containing the store
import { createGlobalState } from 'react-hooks-global-state';



const region = {
          latitude: 59.85843,
          longitude: 17.63356,
          latitudeDelta: 0.01,
          longitudeDelta: 0.0095,
        }  
const { setGlobalState, useGlobalState } = createGlobalState({
    currentIndex: 0,
    initialMapState: {
        markers: [], 
        region: region,
        cards: [],
    }
        
    }
    )

//and in a screen this can be used to change/read
import {setGlobalState, useGlobalState} from '../state' //imports it
const [currentIndex] = useGlobalState("currentIndex") //reads value

//and this is how i use the onMomentumScrollend 
const onMomentumScrollEnd = ({ nativeEvent }) => {
       
   const index = Math.round(nativeEvent.contentOffset.x / Dimensions.get('window').width);
       if (index !== currentIndex) {   
         setGlobalState('currentIndex',index)      
     
   }
 };

Any help is greatly appreciated as well im simply lost, i have tried storing the index in some sort of ref which worked fine and then try to update it on some sort of callback on the useFocusEffect but this got buggy real fast and ended up not really working. I have also tried to google to find some sort of way to keep the markers from not rerendering on state change, something which seems impossible? altough i think it would solve my problem as the markers dont depend on the state at all.

*edit I also feel like i forgot to add that i am extremly happy to switch to any other sort of global state manager if it contains some sort of way to keep this fromh happening