Jammming project - TrackList props are showing in dev tools but trying to use map() on them gives a TypeError showing as undefined

I’m having a problem whereby I’m getting the following error in relation to task no. 34:

This is my full TrackList.js file:

import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';

class TrackList extends React.Component {
    render() {
        return (
            <div className="TrackList">
                {
                    this.props.tracks.map(track => {
                        return <Track track={track} key={track.id} />
                    })
                }
            </div>
        );
    }
}

export default TrackList;

And this is the SearchResults.js file where the props are passed down:

import React from 'react';
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';

class SearchResults extends React.Component {
    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} />
            </div>
        );
    }
}

export default SearchResults;

Before attempting to use map() on the “tracks” props I checked dev tools to be sure the props were being passed down successfully and this is what I got for props on the TrackList component:

{
  "tracks": [
    "{album: \"Madman Across The Water\", artist: \"Elton J…}",
    "{album: \"Love Story\", artist: \"Tim McGraw\", id: 2, …}",
    "{album: \"Lullaby Renditions of Elton John\", artist:…}",
    "{album: \"Tiny Dancer\", artist: \"The White Raven\", i…}"
  ]
}

Can anyone help me understand why I’m getting the error?

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/jammming/projects/jammming-prj