Syntax Error to import components react native

I tried to import components from a separate file in react native learning but they all get errors, I’ve looked for solutions in several forums and communities but I can’t find a solution, is there something wrong with my syntax?

the Problem :
this is my problem at my project can you help some one solution,

ERROR  [Error: undefined Unable to resolve module ./src/Components/MenuBar from D:PROGRAMMINGBelajarJavaScriptReact Navivekesehatan_uiApp.js:
None of these files exist:
  * srcComponentsMenuBar(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)  * srcComponentsMenuBarindex(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)  1 | import React, { useState, useEffect } from "react";
  2 | import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
> 3 | import MenuBar from "./src/Components/MenuBar";
    |                      ^
  4 | const App = () => {
  5 |   const mainBlue = "#0082F7";
  6 |   const mainBlack = "#34354e";]
error: Error: Unable to resolve module ./src/Components/MenuBar from D:PROGRAMMINGBelajarJavaScriptReact Navivekesehatan_uiApp.js: 

App.js

this is my code in App. js I have imported the file correctly in the directory that has been pointed to, namely MenuBar.js but still error

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import MenuBar from "./src/Components/MenuBar";
const App = () => {
  const mainBlue = "#0082F7";
  const mainBlack = "#34354e";
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}></View>
      <MenuBar />
    </View>
  );
};
const styles = StyleSheet.create({
  iconBtn: {
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: "blue",
    flex: 1,
  },
});

export default App;

on MenuBar.js

import React from "react";
import { Text, View } from "react-native";
import Icon from "react-native-vector-icons/Ionicons";

const MenuBar = () => {
  return (
    <View
      style={{
        flexDirection: "row",
        backgroundColor: "#fff",
        elevation: 3,
        paddingTop: 10,
        paddingBottom: 10,
      }}
    >
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="home" size={22} color={mainBlue} />
        <Text style={{ fontSize: 12, color: mainBlue }}>Home</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="calendar" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Jadwal</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="chatbubble-ellipses" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Pesan</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconBtn}>
        <Icon name="person" size={22} color={mainBlack} />
        <Text style={{ fontSize: 12, color: mainBlack }}>Profile</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MenuBar;


[myDirectory][1]

Syntax Error