I am trying to import something from ./components/task using this line of code:

import Task from './components/task';

but I get the error

None of these files exist:
  * components\task(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * components\task\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  1 | import React from 'react';
  2 | import { StyleSheet, Text, View } from 'react-native';
> 3 | import Task from './components/task';
    |                   ^
  4 |
  5 | export default function App() {
  6 |   return (

I have no idea why I am getting this error. The screenshot clearly shows the path does exist.

This is the error I get, even though the path does exist.

https://i.imgur.com/VhMWUHt.png