How to keep a new component after Search function is called? - reactjs

Question

On a React project, I'm trying to link user's spotify playlist to an app page. Until this step, I've created quite a few components to enable user to search for songs, add the ones from the list to his spotify playlist (but user cannot see his previous playlists).
I have added a dummy box to be utilized when I achieve to pull user's playlist info, the problem is when I type a song name and click Search, the box I created for this purpose disappears.
My code previous to adding latest SpotifyPlaylist box can be find in the following: https://github.com/basakulcay/Jammming
This is how it looks like before search:
I cannot find out where I need to make a change to make this happen. I think, it should be related to onSearch, but nothing I tried seemed to be working. *Appreciate the help! :) *
Below is the code from App.js:
import React from 'react';
import './App.css';
import { SearchBar } from '../SearchBar/SearchBar';
import { SearchResults } from '../SearchResults/SearchResults.js';
import { Playlist } from '../Playlist/Playlist.js';
import Spotify from '../../util/Spotify.js';
import { SpotifyPlaylist } from '../spotifyPlaylist/SpotifyPlaylist';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [],
playlistName: 'My Playlist',
playlistTracks: [],
};
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
}
addTrack(track) {
let tracks = this.state.playlistTracks;
if (tracks.find((savedTracks) => savedTracks.id === track.id)) {
return;
}
tracks.push(track);
this.setState({ playlistTracks: tracks });
}
removeTrack(track) {
let tracks = this.state.playlistTracks;
tracks = tracks.filter((currentTrack) => currentTrack.id !== track.id);
this.setState({ playlistTracks: tracks });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
savePlaylist() {
const trackUris = this.state.playlistTracks.map((track) => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({ playlistName: 'New Playlist', playlistTracks: [] });
});
}
search(term) {
Spotify.search(term).then((searchResults) => {
this.setState({ searchResults: searchResults });
});
}
render() {
return (
<div>
<h1>
Ja<span className="highlight">mmm</span>ing
</h1>
<div className="App">
<SearchBar onSearch={this.search} />
<div className="App-playlist">
<SearchResults
onAdd={this.addTrack}
searchResults={this.state.searchResults}
/>
<Playlist
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>
<SpotifyPlaylist />
</div>
</div>
</div>
);
}
}
export default App;