React data shows in console.log but tells me its undefined when trying to render

Question

Here's the error im getting

TypeError: Cannot read property 'name' of undefined
LibrarySong
C:/Users/Vimalan/Desktop/React-Course/ChapterTwo/reactprayer2/src/components/LibrarySong.js:5
  2 | //This file just display song title, picture, mp3 file
  3 | 
  4 | const LibrarySong = ({ song }) => {
> 5 |     console.log(song.name)
  6 |     return (
  7 |         <div>
  8 |         <h1>{song.name}</h1>
View compiled
▶ 21 stack frames were collapsed.

So what it's suppose to do is from the Library.js will map through songs which then in is passed down as a prop into the Librar.js Component but for some reason when I try to display the name it not able to read its property. I even console log it and it displayed through there

console output:

LibrarySong.js:5 Beaver Creek
LibrarySong.js:5 Daylight
LibrarySong.js:5 Keep Going
LibrarySong.js:5 Nightfall
LibrarySong.js:5 Reflection
LibrarySong.js:5 Under the City Stars
LibrarySong.js:5 Uncaught 

TypeError: Cannot read property 'name' of undefined
    at LibrarySong (LibrarySong.js:5)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushSync (react-dom.development.js:22467)
    at Object.scheduleRoot (react-dom.development.js:24444)
    at react-refresh-runtime.development.js:284
    at Set.forEach (<anonymous>)
    at Object.performReactRefresh (react-refresh-runtime.development.js:263)
    at RefreshUtils.js:62

Here's my Library.js

import React from "react";
import LibrarySong from "./LibrarySong";

const Library = ({ songs }) => {
  return (
    <div className="library">
      <h2>Library</h2>
      <div className="library-songs">
        {songs.map((song) => 
          <LibrarySong  id ={song.id} key={song.id} song={song} />
        )}
        <LibrarySong />
      </div>
    </div>
  );
};

export default Library;

and LibrarySongs.js

    import React from "react";
//This file just display song title, picture, mp3 file

const LibrarySong = ({ song }) => {
    console.log(song.name)
    return (
        <div>
          <img alt={song.name} src={song.cover}/>
          <div className="song-description">
            <h3>{song.name}</h3>
            <h4>{song.artist}</h4>
          </div>
        </div>
      );
    };


export default LibrarySong;

and my App.js

import React, { useState } from "react";
import Player from "./components/Player";
import Song from "./components/Song";
import "./styles/app.scss";
import data from "./data";
import Library from "./components/Library";

function App() {
  //State
  const [songs, setSongs] = useState(data()); //grabs all songs
  const [currentSong, setCurrentSong] = useState(songs[0]); // get current song
  const [isPlaying, setIsPlaying] = useState(false); // check to see if song is playing or paused
  return (
    <div className="App">
      <Song currentSong={currentSong} />
      <Player
        currentSong={currentSong}
        isPlaying={isPlaying}
        setIsPlaying={setIsPlaying}
      />
      <Library songs={songs}/>
    </div>
  );
}

export default App;

Answer 1

Your LibrarySong component expects a prop named song:

const LibrarySong = ({ song }) => {

But the Library component is using LibrarySong without passing any props:

<LibrarySong />

This is probably a typo, you probably want to just delete it.