React Native - Cannot find module X or its corresponding type declarations

I have recently setup a react native typescript project

I have been trying to get absolute paths working with the setup guide here. But no matter what I seem to do I continually get the error Cannot find module 'X' or its corresponding type declarations TS(2307)

In its current state my tsconfig looks like

{"extends": "expo/tsconfig.base","include": ["./src/**/*"],"compilerOptions": {"allowJs": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"isolatedModules": true,"jsx": "react-native","lib": ["es2017"],"moduleResolution": "node","noEmit": true,"strict": true,"target": "esnext","baseUrl": ".","paths": {"@util/*": ["./src/util/*"],"@components/*": ["./src/components/*"],    }  },"exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js"  ]}

My babel.config.js looks like the following

module.exports = (api) => {  api.cache(true);  const presets = ['babel-preset-expo'];  const plugins = [    ['module-resolver',      {        root: ['./src'],        extensions: ['.ios.js', '.android.js', '.js', '.jsx', '.ts', '.tsx', '.json'],        alias: {'@components': './src/components','@util': './src/util',        },      },    ],  ];  return {    presets,    plugins,  };};

My current eslintrc.js looks like the following

module.exports = {  env: {    browser: true,    es2021: true,  },  extends: ['plugin:react/recommended','airbnb',  ],  parser: '@typescript-eslint/parser',  parserOptions: {    ecmaFeatures: {      jsx: true,      tsx: true,    },    ecmaVersion: 13,    sourceType: 'module',  },  globals: {    React: 'readonly',    JSX: 'readonly',  },  plugins: ['react','import','@typescript-eslint',  ],  rules: {'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],'import/extensions': ['error', 'ignorePackages', {      js: 'never',      jsx: 'never',      ts: 'never',      tsx: 'never',    }],'no-use-before-define': 'off',  },  settings: {'import/resolver': {      node: {        path: ['src'],        extensions: ['.js', '.jsx', '.ts', '.tsx'],      },      typescript: {        alwaysTryTypes: true,      },      // 'babel-module': {},    },  },};

A few things I have tried so far - after each have been restarting vscode/ts server

• Changed names of paths so that they didn't have @ as a prefix, no difference
• Changed baseUrl to src and updated paths accordingly, no difference
• Tried to use babel-plugin-module-resolver in eslint, no difference
• Tried to use metro-react-native-babel-preset with babel, no difference
• Tried to change babel.config.js to a .babelrc and babel.config.json file neither made a difference
• Been playing around with tsconfig settings for a while and not much luck

My project is very simple at the moment simply consisting of the boilerplate template downloaded from yarn expo init -t expo-template-blank-typescript. Looking something like

src  components    index.ts    TestButton.tsx  util    index.ts    ThemesProvider.tsx  index.tsApp.tsxtsconfig.json.eslintrcbabel.config.js...

Any help with this would be greatly appreciated, I imagine it is something super small, but I have been tweaking settings for a while now and have no clue what is wrong with the setup.