broken expo router, duplicated files

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "prettier": "^2.8.8",
-    "typescript": "^5.1.3"
+    "typescript": "^4.9.5"
   },
   "private": true
 }

src/app/(Authentication)/Welcome/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import StyledButton from '../../../components/StyledButton';
 import styles from './styles';
 
 function WelcomeScreen() {
@@ -12,8 +13,8 @@ function WelcomeScreen() {
       </View>
 
       <View style={styles.buttonContainer}>
-        <StyledButton text="LOG IN" />
-        <StyledButton text="CREATE ACCOUNT" />
+        <StyledButton text="LOG IN" file="/Login" />
+        <StyledButton text="CREATE ACCOUNT" file="/SignUp" />
       </View>
     </View>
   );

src/app/index.tsx

@@ -1,6 +1,5 @@
 import { Link } from 'expo-router';
-import { Text, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Text, TouchableOpacity, View } from 'react-native';
 import styles from './styles';
 
 function StartScreen() {

src/components/StyledButton.tsx

@@ -1,13 +1,28 @@
+import { Link } from 'expo-router';
 import React from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { Pressable, Text, TouchableOpacity } from 'react-native';
 import styles from './styles';
 
-function StyledButton({ text }: { text: string }) {
+function StyledButton({ text, file }: { text: string; file: string }) {
   return (
-    <TouchableOpacity style={[styles.buttonContainer]} activeOpacity={0.7}>
-      <Text style={[styles.buttonText]}>{text}</Text>
-    </TouchableOpacity>
+    <Link href={file} asChild>
+      <Pressable>
+        <TouchableOpacity style={[styles.buttonContainer]} activeOpacity={0.7}>
+          <Text style={[styles.buttonText]}>{text}</Text>
+        </TouchableOpacity>
+      </Pressable>
+    </Link>
   );
 }
 
 export default StyledButton;
+
+/* 
+<Link href={file} asChild>
+      <Pressable>
+        <TouchableOpacity style={[styles.buttonContainer]} activeOpacity={0.7}>
+          <Text style={[styles.buttonText]}>{text}</Text>
+        </TouchableOpacity>
+      </Pressable>
+    </Link>
+    */