Unmatched Route Page could not be found in React Native due to Clerk Auth

Question

app/(public)/login.tsx

import { useSignIn } from "@clerk/clerk-expo";
import { Link } from "expo-router";
import React, { useState } from "react";
import {
  View,
  StyleSheet,
  TextInput,
  Button,
  Pressable,
  Text,
  Alert,
} from "react-native";
import Spinner from "react-native-loading-spinner-overlay";

const Login = () => {
  //   const { signIn, setActive, isLoaded } = useSignIn();

  const [emailAddress, setEmailAddress] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);

  const onSignInPress = async () => {
    // if (!isLoaded) {
    //   return;
    // }
    // setLoading(true);
    // try {
    //   const completeSignIn = await signIn.create({
    //     identifier: emailAddress,
    //     password,
    //   });
    //   // This indicates the user is signed in
    //   await setActive({ session: completeSignIn.createdSessionId });
    // } catch (err: any) {
    //   alert(err.errors[0].message);
    // } finally {
    //   setLoading(false);
    // }
  };

  return (
    <View style={styles.container}>
      <Spinner visible={loading} />

      <TextInput
        autoCapitalize="none"
        placeholder="[email protected]"
        value={emailAddress}
        onChangeText={setEmailAddress}
        style={styles.inputField}
      />
      <TextInput
        placeholder="password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.inputField}
      />

      <Button onPress={onSignInPress} title="Login" color={"#6c47ff"}></Button>

      <Link href="/reset" asChild>
        <Pressable style={styles.button}>
          <Text>Forgot password?</Text>
        </Pressable>
      </Link>
      <Link href="/register" asChild>
        <Pressable style={styles.button}>
          <Text>Create Account</Text>
        </Pressable>
      </Link>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
  },
  inputField: {
    marginVertical: 4,
    height: 50,
    borderWidth: 1,
    borderColor: "#6c47ff",
    borderRadius: 4,
    padding: 10,
    backgroundColor: "#fff",
  },
  button: {
    margin: 8,
    alignItems: "center",
  },
});

export default Login;

When I run my app like this I can see the textinputs and all. But when I uncomment the commented part i get "Unmatched Route Page could not be found."

app/(public)/_layout.tsx

import { Stack } from "expo-router";

const PublicLayout = () => {
  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: "#6c47ff" },
        headerTintColor: "#fff",
        headerBackTitle: "Back",
      }}
    >
      <Stack.Screen
        name="login"
        options={{ headerTitle: "Clerk Auth App" }}
      ></Stack.Screen>
      <Stack.Screen
        name="register"
        options={{ headerTitle: "Create Account" }}
      ></Stack.Screen>
      <Stack.Screen
        name="reset"
        options={{ headerTitle: "Reset Password" }}
      ></Stack.Screen>
    </Stack>
  );
};

export default PublicLayout;

I found similar questions on the internet and most of them are saying to do the export default. I have done that and my app actually works fine. But whenever i use the useSignIn hook of Clerk Auth, I get the Unmatched Route.