React Native: How to use deep linking with iOS?

I'm trying to use deep linking in my react native app for ios. I've been following this document by React Navigation.

I added what was needed to my AppDelegate.m and to Xcode:

However I'm confused on how to implement this in my App.js:

const AuthStack = createStackNavigator();

const AuthStackScreen = () => (
  <AuthStack.Navigator >
    <AuthStack.Screen 
    name="Ingresar"
    component={Login}
    options = {{
      headerShown: false,
      title: "Bienvenido"
    }}/>
    <AuthStack.Screen name="CrearCuenta" 
    component={Signup} 
    options={{title: "Crear cuenta"}}/>
  </AuthStack.Navigator>
);

const Tabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const DonationsStack = createStackNavigator();
const DonateStack = createStackNavigator();
const InstitutionsStack = createStackNavigator();
const ProfileStack = createStackNavigator();

const DonationsStackScreen = () => (
  <DonationsStack.Navigator>
    <DonationsStack.Screen name="Pedidos" component={DonationsScreen}/>
    <DonationsStack.Screen name="Realizar donación" component={DonationFormScreen}/>
    <DonationsStack.Screen name="Donación confirmada" component={DonationConfirmationScreen}
    options = {{
      headerShown: false
    }}/>
  </DonationsStack.Navigator>
);

// I omit some of the stack screens here.

const TabsScreen = () => (
  <Tabs.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => 
    {
      let iconName;
      if (route.name === 'Home') {
        iconName = focused ? 'home' : 'home-outline';
        return <MaterialCommunityIcons name={iconName} size={size} color={color}/>;
    
      } else if (route.name === 'Pedidos') {
        iconName = focused ? 'ios-list-box' : 'ios-list';
      }
       else if (route.name === 'Donar') {
        iconName = focused ? 'gift' : 'gift-outline';
        return <MaterialCommunityIcons name={iconName} size={size} color={color}/>;
      } else if (route.name === 'Perfil') {
        iconName = focused ? 'user-alt'
        : 'user';
        return <FontAwesome5 name={iconName} size={size-4} color={color}/>;
      } else if (route.name === 'Instituciones') {
        iconName = 'md-business';
      }
      return <Ionicons name={iconName} size={size} color={color} />;
    },
    })}
    tabBarOptions={{
    activeTintColor: '#013773',
    inactiveTintColor: 'gray',
    }}>
    <Tabs.Screen name="Home" component={HomeStackScreen}/>
    <Tabs.Screen name="Pedidos" component={DonationsStackScreen}/>
    <Tabs.Screen name="Donar" component={DonateStackScreen}/>
    <Tabs.Screen name="Instituciones" component={InstitutionsStackScreen}/>
    <Tabs.Screen name="Perfil" component={ProfileStackScreen}/>
  </Tabs.Navigator>
);

const RootStack = createStackNavigator();
const RootStackScreen = ({user}) => (
  <RootStack.Navigator headerMode="none">
    {user ? (
      <RootStack.Screen 
      name="App"
      component={TabsScreen}
      options={{animationEnabled: false}}/>
    ) : (
      <RootStack.Screen
      name="Auth"
      component={AuthStackScreen}
      options={{animationEnabled: false}}/>
    )}
  </RootStack.Navigator>
);

export default function ponte() {
  const [isLoading, setIsLoading] = React.useState(false);
  const [user, setUser] = React.useState(null);
  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (isLoading) setIsLoading(false);
  }

  if (isLoading) return null;

  useEffect(() => {
    SplashScreen.hide();
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  const authContext = React.useMemo(() => {
    return {
      signIn: (email, password) =>
        auth()
          .signInWithEmailAndPassword(email.email, password.password)
          .then(res => {
            setIsLoading(false);
            setUser(res.user.uid);
      })
    ,
      signUp: () => {
        setIsLoading(false);
        setUser("test");
      },
      signOut: () => {
        setIsLoading(false);
        auth().signOut().then(() => console.log('User signed out!'));
        setUser(null);
      }
    };
  }, []);

  /*
  Here comes my deeplinking. 
  What I need to do is that when the user clicks on my URL
  it goes to Pedidos --> Realizar donación with a parameter called request.
  All of this happens inside the DonationsStack
  */

  const deepLinking = {
    prefixes: ['https://demoApp.com', 'demoApp://'],
    config: {
      Home: 'HomePath',
      RealizarDonacion: {
        path: 'Pedidos/Realizar donación/:request',
        params: {
          request: null,
        }
      }
    } ,

  };

  return(
    <AuthContext.Provider value={authContext}>
      <NavigationContainer linking={deepLinking}>
        <RootStackScreen user={user} />
      </NavigationContainer>
    </AuthContext.Provider>
  );

}

As you see at the end I provide my deepLinking component to the NavigationContainer. However when I type demoApp://Pedidos/Realizar donación/44 in Safari I don't get redirected to my app.

I'm not convinced about that space inside the path, however it doesn't work when I create a deepLink to Pedidos only either.

I need my URL to open my app and inside the DonationsStack navigate to Pedidos (DonationsScreen) --> Realizar donación (DonationFormScreen)

Update: My app opens but I don't get redirected to any screen.