I am currently making a music player app on React, and am new to React js. Not sure why i'm getting this error, having been following the exact steps on the tutorial I'm watching.

The full Error Code is:

Module not found: Error: You attempted to import ../components/Player which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

For better clarity, This is the code for the Player component:

import React from 'react';
import PlayerDetails from './PlayerDetails';

function Player(props) {
    return (  
        <div className="c-player">
            <audio></audio>
            <h4>Now playing</h4>
            <PlayerDetails song={props.song}/>
            {/*CONTROLS */}
            <p><strong> Next Up:</strong> {props.nextSong.title} {props.nextSong.artist}</p>

        </div>
    );
}

export default Player;

And this is the Code on App.js:

 import { useState } from "react";
 import Player from "../components/Player";

function App() {
const [songs, setSongs]= useState([
{
  title: "1",
  artist: "1",
  img_src: "./images/song-1.jpg/",
  src: "./music/song-1.mp3"
},
{
  title: "2",
  artist: "2",
  img_src: "./images/song-2.jpg/",
  src: "./music/song-2.mp3"
},
{
  title: "3",
  artist: "3",
  img_src: "./images/song-3.jpg/",
  src: "./music/song-3.mp3"
},
{
  title: "4",
  artist: "4",
  img_src: "./images/song-4.jpg/",
  src: "./music/song-4.mp3"
}

]);
const [currentSongIndex, setCurrentSongIndex]= useState(0);
const [nextSongIndex, setnextSongIndex]= useState (currentSongIndex + 1);


  return (
    <div className="App">
     <Player 
     songs= {songs[currentSongIndex]}
     nextSong={songs[nextSongIndex]}
     />
    </div>
  );
}

export default App;

Here is the folder structure:

Appreciate your time!