React Native with TypeScript Error unable to resolve module

I just created a new project with React Native Typescript template. But I found that when I import a new component it throws the following error. My new component is located inside src/screens/HomeScreen.tsx

error: Error: Unable to resolve module `src/screens/HomeScreen` from `App.tsx`: src/screens/HomeScreen could not be found within the project.

If I do the same component inline within the App.tsx then it works just fine. But importing from another file causing this issue. I tried to delete and re-create the issue, but still happening.

Can someone help me out on this. Thanks in advance

App.tsx

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import HomeScreen from 'src/screens/HomeScreen';

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

export default App;

HomeScreen.tsx

import React from 'react'
import {Text} from 'react-native'

const HomeScreen = (): any => {
    return (
        <>
            <Text>test </Text>   
        </>
    )
}

export default HomeScreen

The folder structure