Cannot find module '@components/...' or its corresponding type declarations.ts(2307) in React Native

Previously have used TypeScript with React several times without any issues. Moving over to React Native and recieved this error for both imports for my custom "RoundedButton" and "Card" components:

Cannot find module '@components/Buttons/RoundedButton' or its corresponding type declarations.ts(2307)Cannot find module '@components/Card' or its corresponding type declarations.ts(2307)

Here is the ./app/index.tsx...

import React from 'react';import { View, Text } from 'react-native';import Card from '@components/Card';import RoundedButton from '@components/Buttons/RoundedButton';export default function Home() {  return (    // Create a view the same size as the screen and center the content with a background color<View className="justify-center h-full"><Card><Text className="text-2xl font-bold text-center mb-3">          lorem ipsum</Text><RoundedButton text="Sign Up" color="primary" onPress={() => {}} /><RoundedButton text="Sign In" color="secondary" onPress={() => {}} /></Card></View>  );}

...the ./components/Card.tsx...

import React from 'react';import { View } from 'react-native';import styles from '@styles/components/Card.scss';// Add type definitions for the propstype CardProps = {  children: React.ReactNode;};function Card(props: CardProps) {  const { children } = props;  // Return the card with the appropriate styles  return <View className={`${styles.card}`}>{children}</View>;}export default Card;

...and the ./components/Buttons/RoundedButton.tsx

import React from 'react';import { Pressable, Text } from 'react-native';import styles from '@styles/components/Buttons/RoundedButton.scss';// Add type definitions for the propstype RoundedButtonProps = {  text: string;  color: 'primary' | 'secondary' | 'tertiary';  onPress: () => void;};function RoundedButton(props: RoundedButtonProps) {  // Destructure the props  const { text, color, onPress } = props;  const buttonColor = `button-${color}`;  const textColor = `text-${color}`;  // Return the button with the appropriate styles  return (<Pressable      onPress={onPress}      className={`${styles.button} ${styles[buttonColor]}`}><Text className={`${styles.text} ${styles[textColor]}`}>{text}</Text></Pressable>  );}export default RoundedButton;

Also my ./tsconfig.json

{"extends": "expo/tsconfig.base","compilerOptions": {"strict": true,"allowJs": true,"esModuleInterop": true,"jsx": "react-native","lib": ["esnext", "dom"],"moduleResolution": "node","noEmit": true,"resolveJsonModule": true,"skipLibCheck": true,"target": "ESNext","types": ["react-native"],"baseUrl": "./","paths": {"@app": ["./app/*"],"@assets": ["./assets/*"],"@components": ["./components/*"],"@styles": ["./styles/*"],"@utils": ["./utils/*"]    }  }}

I've tried looking into the issue several times and can't find a clear answer for the problem. Besides the red squiggles below there '@components/Card' and '@components/Buttons/RoundedButton' in index.tsx I have no other ESLint, TypeScript or build errors across the whole project.

I am not sure if I need a types.ts for each one, but I never had to do that when I worked on two other React TypeScript projects in the past.