React can't access components

I am very new to react and I'm having trouble separating my components into different files.

I get this error

ERROR in ./src/App.js 5:0-34 Module not found: Error: You attempted to import /components/map which falls outside of the project src/ directory.

I have an App.js file where I am trying to access my map component.

import Map from "/components/map"

import './App.css';
import { GoogleMap, useLoadScript, MarkerF } from "@react-google-maps/api";
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
  apiKey: "Not Showing StackOverflow",
  authDomain: "Not Showing StackOverflow",
  projectId: "Not Showing StackOverflow",
  storageBucket: "Not Showing StackOverflow",
  messagingSenderId: "Not Showing StackOverflow",
  appId: "Not Showing StackOverflow",
  measurementId: "Not Showing StackOverflow"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

function App() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    libraries: ["places"],
  });

  if (!isLoaded) return <div>Loading...</div>
  return(
    <div className="Page">
      <Map />
    </div>
  );
  
}

export default App;

and I have a file called map.tsx

import { useState, useMemo, useCallback, useRef } from "react";
import {
    GoogleMap,
    Marker,
    DirectionsRenderer,
} from "@react-google-maps/api";
//import Places from "./places";
//import Distance from "./distance";
import React from "react";

type LatLngLiteral = google.maps.LatLngLiteral;
type DirectionsResult = google.maps.DirectionsResult;
type MapOptions = google.maps.MapOptions;

export default function Map() { 
    return <GoogleMap 
      zoom={10} 
      center={{ lat: 44, lng: -80 }} 
      mapContainerClassName='map-container'
    > </GoogleMap>
  }

The components folder is inside the src folder so not sure what the error is It's probably something simple I just don't know

Another note I created this app with create-react-app and I added a file .env and put NODE_PATH=./src from a suggestion here Can't resolve module (not found) in React.js but it is still not working

My file structure

My-App-Name/

-src/

--components/

---map.tsx

--App.js

-.env