expo - React Native Toast Message Custom Toast not applying - Stack Overflow

I have an expo app. Im using react-native-toast-message to display toast, I have a config that I customize all the messages, but the customizations applies at first, but then if I change like a letter in one of the toasts that Im using lets say something from text2 in one of the examples, It resets back to the default one and doesnt go back to the custom one I made.

I followed the docs to make the customizations, but I still don't understand why its losing the custom style the moment I change a text

here is my custom config

// components/common/toast/ToastConfig.tsx
import { BaseToast, ErrorToast, ToastConfig } from "react-native-toast-message";
import { colors } from "@/constants/colors";
import { View } from "react-native";

export const toastConfig: ToastConfig = {
  success: (props) => (
    <BaseToast
      {...props}
      style={{
        borderLeftColor: colors.primary[500],
        backgroundColor: "white",
        borderLeftWidth: 4,
        width: "90%", // Added width
        marginHorizontal: "5%", // Added margin
      }}
      contentContainerStyle={{
        paddingHorizontal: 15,
      }}
      text1Style={{
        fontSize: 16,
        fontWeight: "600",
        fontFamily: "Roboto-Medium", // Added font family
        color: colors.gray[800],
      }}
      text2Style={{
        fontSize: 14,
        fontFamily: "Roboto-Regular", // Added font family
        color: colors.gray[600],
      }}
      text2NumberOfLines={2} // Added number of lines
    />
  ),
  error: (props) => (
    <ErrorToast
      {...props}
      style={{
        borderLeftColor: "red",
        backgroundColor: "white",
        borderLeftWidth: 4,
        width: "90%", // Added width
        marginHorizontal: "5%", // Added margin
        marginTop: "10%",
        height: 80,
      }}
      contentContainerStyle={{
        paddingHorizontal: 15,
        paddingVertical: 15,
      }}
      text1Style={{
        fontSize: 16,
        fontWeight: "600",
        fontFamily: "Roboto-Medium", // Added font family
        color: "red",
      }}
      text2Style={{
        fontSize: 14,
        fontFamily: "Roboto-Regular", // Added font family
        color: colors.gray[600],
      }}
      text2NumberOfLines={2} // Added number of lines
    />
  ),
};

export default toastConfig;

Here is my layout.tsx where I set it up

.......
import { NotificationsProvider } from "@/context/NotificationsContext";
import toastConfig from "@/components/common/toast/ToastConfig";

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded, error] = useFonts({
    "Roboto-Black": require("../assets/fonts/Roboto-Black.ttf"),
    "Roboto-BlackItalic": require("../assets/fonts/Roboto-BlackItalic.ttf"),
.....
  });

  useEffect(() => {
    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <NotificationsProvider>
            <GestureHandlerRootView style={{ flex: 1 }}>
              <BottomSheetModalProvider>
                <Stack>
                  <Stack.Screen
                    name="index"
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen
                    name="+not-found"
                    options={{
                      headerShown: false,
                    }}
                  />
                  <Stack.Screen name="(auth)" options={{ headerShown: false }} />
                  <Stack.Screen name="(main)" options={{ headerShown: false }} />
       
                </Stack>
              </BottomSheetModalProvider>
            </GestureHandlerRootView>
          </NotificationsProvider>
        </AuthProvider>
      </QueryClientProvider>
      <Toast config={toastConfig} position="top" visibilityTime={4000} />
    </>
  );
}

and here is the usage, its here if i change a text it loses the styles

 const changeCountryCode = () => {
    Toast.show({
      type: "error",
      text1: "Unavailable",
      text2: "Our service is only available in United State. We apologize for the inconvenience.",
      topOffset: 20,
    });
  };