I am currently facing an issue with passing playlist tracks from the Playlist component to the TrackList component in my project. Despite carefully examining my code, I am unable to find a solution. To give you a better idea of what's going on, here's a link to my webpage: http://localhost:3000/. As you can see, the webpage is supposed to look like this: , with the information from the results replicated in the new playlist section as well. The TrackList component is visible when imported to the Results component but not when imported to the Playlist (New Playlist) component on the right-hand side of the webpage. For your reference, here's the code for the Results and Playlist components as well as the TrackList component: Results Component:

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

class SearchResults extends React.Component {
   render () {
    return (
        
        
Results
     
         
         
    )
   }
}
export default SearchResults;

Playlist Component:

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

class Playlist extends React.Component {
    render() {
       return (
        
        
         
        SAVE TO SPOTIFY

       ) 
    }
}
export default Playlist;

TrackList Component:

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

class TrackList extends React.Component {
    render() {
      return (
          
            {      
            this.props.tracks?.map(track => {
              return ;
            })
        } 

      ) 
    }
}
export default TrackList;

Any help or guidance would be highly appreciated.