React Native Path Allias

Question

I created an expo app and installed a babel-plugin-module-resolver v5.0.0, i wanted to create a path alias to prevent importing "../../../component/comp1" and i want to do this "@/app/components/comp1" instead

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "allowJs": true,
    "jsx": "react-native",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strictPropertyInitialization": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noEmit": true,
    "lib": ["DOM", "ESNext"],
    "strictNullChecks": true,
    "strictBindCallApply": true,
    "baseUrl": "./",
    "paths": {
      "@": ["./"],
    }

  },
  "typeRoots": [],
  
}

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          extenstions: [
            '.ts',
            '.tsx',
            '.js',
            '.jsx',
            '.json',
            '.svg',
            '.png',
            '.jpg',
          ],
          alias: {
            '@': './',
          },
        },
      ],
      [
        "module:react-native-dotenv",
        {
          envName: "APP_ENV",
          moduleName: "@env",
          path: ".env",
        },
      ], 
      "nativewind/babel",
    ],
    env: {
      production: {
        plugins: ['react-native-paper/babel'],
      },
    },
  };
};

LoginScreen.tsx

import { View } from 'react-native'
import { Text } from 'react-native-paper'
import React from 'react'
import Component1 from "@/app/components/Comp1/One"
import Component2  from '@/app/components/Comp1/Two'
import Threes from '@/app/components/Comp2/Three'


const LoginScreen = () => {
  return (
    <View className="flex-1 items-center justify-center bg-white border-solid">
      <Text className=''>LoginScreen</Text>
    <Component1/>
    <Component2/>
    <Threes/>
    </View>
  )
}

export default LoginScreen

The code above works and perfectly used the components however the "@/app/components/Comp1/One" gives an error message Cannot find module '@/app/components/Comp1/One' or its corresponding type declarations.ts(2307)

I also want an auto completion, when i type it will automatically autocomplete import Component1 from "@/app/components/Comp1/One", there is an autocomplete but only this import Component1 from "app/components/Comp1/One" which dont have an error message but give a runtime error. Thank you.