Trying to set up deep linking, page referenced not being found - react-native

Question

I'm trying to understand the basics of deep linking when in the development stage, by following this guide (https://reactnavigation.org/docs/deep-linking/). When I try to run the command suggested by the guide, the simulator hits me with a "there was a problem loading the requested app" then shows the address that I was trying to access. When I check the expo client, the cli isn't running, im not sure if this is a side-effect of the failure or the reason why it's failing as if npx uri-scheme open exp://127.0.0.1:19000/login --ios doesn't start expo.
I really wouldn't doubt it if the issue is in the way I tried and set it up. Heres the code.
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Login from "./screens/login";
import * as Linking from 'expo-linking';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button title="login" onPress={() => navigation.navigate('Login')} />
</View>
);
}
const Stack = createStackNavigator();
const prefix = Linking.makeUrl('/');
function App() {
const linking = {
prefixes: [prefix],
config: {
screens: {
Login: "/login"
}
},
};
return (
<NavigationContainer linking={linking} fallback={<Text>Loading content...</Text>}>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen hide name="Home" component={HomeScreen} />
<Stack.Screen hide name="Login" component={Login} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
note that the login page is another file, just containing text for test purposes.
I'm pretty positive this is incorrect is probably many ways. How I understood this is that when the /login follows the host path, it would link the user to the login page. What am I missing? Thanks!