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