Can not import TypeScript components with Babel custom aliases

I am using babel-plugin-module-resolver to import project files easily with using custom aliases. Everything seems fine on the TypeScript side. Below is the tsconfig.json:

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es6"],
    "allowJs": true,
    "jsx": "react-native",
    "noEmit": true,
    "isolatedModules": true,

    /* Strict Type-Checking Options */
    "strict": true,
    "noImplicitAny": false,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "baseUrl": ".",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    /* Experimental Options */
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

I have a components folder in the root folder of the project and inside the folder I have 2 files.

index.tsx:

export {default as TestComponent } from './Test';

Test.tsx:

import React from 'react';
import {View, Text} from 'react-native';

export default () => {
  return (
    <View>
      <Text>Hello world</Text>
    </View>
  );
};

I am simply re-exporting the Test component from inside Test.tsx and using it in App.tsx like below:

import React from 'react';
import {StyleSheet} from 'react-native';

import {TestComponent} from 'components';

const App = () => {
  return <>
    <TestComponent />
  </>;
};

const styles = StyleSheet.create({});

export default App;

I get no warnings and no errors from the TypeScript compiler but when I run the app, I get:

Error: Unable to resolve module 'components' from 'App.tsx': components could not be found in the project.

So it seems something with the babel configuration which is like this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          "components": "./components"
        },
      },
    ],
  ],
};

The funny thing is, if I import the Test component from /components/Test, skipping the re-exporting inside the index.tsx everything works like a charm:

import React from 'react';
import {StyleSheet} from 'react-native';

import TestComponent from 'components/Test';

const App = () => {
  return <>
    <TestComponent />
  </>;
};

const styles = StyleSheet.create({});

export default App;

So I really can't find out what's wrong here. Any ideas?

I am using React Native 0.61.3 and all the packages are at their latest versions.

EDIT: Also I just found out that babel.config.js is really ignored. Created an invalid configuration and it continued to work.