Uncaught Error: Cannot find module './recipes' in React Native

Question

So I'm trying to import files from the ./recipes folder but it keeps showing in the error that it can't find the module './recipes'

This is my App.js:

import React, { Component } from "react";

import Home from "./Screens/Home";
import { Ampalaya, AdobongSitaw } from "./recipes";



<NavigationContainer>
        <StatusBar style="auto" />
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />

          <Stack.Screen
            name="Ampalaya"
            component={Ampalaya}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />

          <Stack.Screen
            name="AdobongSitaw"
            component={AdobongSitaw}
            options={{
              headerRight: (props) => <Logo {...props} />,
              headerTitle: "Back",
            }}
          />
</Stack.Navigator>
      </NavigationContainer>

Also all those files are existing on their perspective folder. Still can't find a solution. Here is my folder structure:

enter image description here