react-native-maps crash application on provider="google" when I try to add custom styles

I have an Expo app with react-native-maps and I want to set custom styles to the map like in this thread react-native-maps custom map style

but when I set provider google my app crashes, I googled and fount this thread https://github.com/react-native-maps/react-native-maps/issues/4130 according to that the issue was solved and I should update react-native-maps to version 1.1.0, and so I did, but after upgrade I got warning from Expo saying that this version is incompatible and I should have installed

 "react-native-maps": "0.31.1",

also the issue still persisted after update another solution was to set provider as a state variable initially as PROVIDER_DEFAULT and that update it to PROVIDER_GOOGLE on page load in useEffect but this did not do the trick either. I have installed newest Expo SDK 46 perhaps this can be the case? Any ideas what can I do to have those styled maps working? Thanks and here is my code

export const CityMap = ({ userLocation }: CityMapProps) => {
  const { fakeDatabase } = useAppSelector((state) => state);

  const temporayHardcodedUserLocation: Coords = {
    lat: 52.229555543511836,
    long: 21.020951705448635,
  };
  const regionWithData = {
    latitude: temporayHardcodedUserLocation.lat,
    longitude: temporayHardcodedUserLocation.long,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  };
  const mapStyle = [
    {
      featureType: "landscape.man_made",
      elementType: "labels.icon",
      stylers: [
        {
          visibility: "off",
        },
      ],
    },
    {
      featureType: "poi.attraction",
      elementType: "labels.icon",
      stylers: [
        {
          visibility: "off",
        },
      ],
    },
    {
      featureType: "poi.business",
      elementType: "labels.icon",
      stylers: [
        {
          visibility: "off",
        },
      ],
    },
    {
      featureType: "poi.business",
      elementType: "labels.text",
      stylers: [
        {
          visibility: "on",
        },
      ],
    },
    {
      featureType: "poi.government",
      elementType: "labels.icon",
      stylers: [
        {
          visibility: "off",
        },
      ],
    },
  ];

  return (
    <View>
      <MapView
        style={styles.map}
        region={regionWithData}
        customMapStyle={mapStyle}
      >
        {fakeDatabase.map((spot) => {
          const { lat: latitude, long: longitude } = spot.spotCoords;
          return (
            <Marker
              coordinate={{ latitude, longitude }}
              key={spot.spotId}
              onPress={() => console.log("pressed " + spot.spotName)}
            />
          );
        })}
      </MapView>
    </View>
  );
};
const styles = StyleSheet.create({
  map: {
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});