How to display data from clicked container to other con – Blancer.com Tutorials and projects

I am trying to list data on the left in Your Playlist container When I click on one of the music it should show it in Your Playlist container. It has to save it to browser history as well and it has to remove it from Search because it is already gonna be in Your Playlist container. I will deploy it later to Firebase but now I need help.
It should be added to the left while clicking on one of the listed songs after a search.
Please support me on that.

I am adding my codes here as well for my project:

I have App.js

import "./App.css";
  
import MySongs from "./MySongs.js";
import Search from "./Search.jsx";
function App() {
  return (
    <div className="App">
     
      <div className="body">
        <MySongs />
        <Search />
      </div>
    </div>
  );
}

export default App;

.App {
  background-color: #303030;
  width: 100%;
  height: 100vh;
}
.body {
  display: flex;
}

I have Search.jsx

import React, { useState, useEffect, useRef } from "react";
import "./Search.css";
import styled from 'styled-components';
import { IoSearch,IoClose } from "react-icons/io5";
import {motion, AnimatePresence} from "framer-motion";
import {useClickOutside} from "react-click-outside-hook";
import MoonLoader from 'react-spinners/MoonLoader';
import { useDebounce } from "./hooks/debounceHook";
import axios from "axios";
import { TvShow } from "./tvShow";

const SearchBarContainer = styled(motion.div)`
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 96%;
  height: 2.5em;
  background-color: #424242;
  border-radius: 3px;
  
`;

const SearchInputContainer = styled.div`
  width: 98%;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  position: relative;
  padding: 2px 15px;
`;

const SearchInput = styled.input`
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  font-size: 15px;
  color: white;
  font-weight: 300;
  border-radius: 6px;
  background-color: transparent;
  &:focus {
    outline: none;
    &::placeholder {
      opacity: 0;
    }
  }
  &::placeholder {
    color: #white;
    transition: all 250ms ease-in-out;
  }
`;

const SearchIcon = styled.span`
  color: #bebebe;
  font-size: 14px;
  margin-right: 10px;
  margin-top: 6px;
  vertical-align: middle;
`;

const CloseIcon = styled(motion.span)`
  color: #bebebe;
  font-size: 15px;
  vertical-align: middle;
  transition: all 200ms ease-in-out;
  cursor: pointer;
  &:hover {
    color: #dfdfdf;
  }
`;

const LineSeperator = styled.span`
  display: flex;
  min-width: 100%;
  min-height: 2px;
  background-color: #d8d8d878;
`;

const SearchContent = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1em;
  overflow-y: auto;
`;

const LoadingWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const WarningMessage = styled.span`
  color: #a1a1a1;
  font-size: 14px;
  display: flex;
  align-self: center;
  justify-self: center;
`;

const containerVariants = {
  expanded: {
    height: "26em",
  },
  collapsed: {
    height: "2.5em",
  },
};

const containerTransition = { type: "spring", damping: 22, stiffness: 150 };

export function SearchBar(props) {
  const [isExpanded, setExpanded] = useState(false);
  const [parentRef, isClickedOutside] = useClickOutside();
  const inputRef = useRef();
  const [searchQuery, setSearchQuery] = useState("");
  const [isLoading, setLoading] = useState(false);
  const [tvShows, setTvShows] = useState([]);
  const [noTvShows, setNoTvShows] = useState(false);
  
  
  const isEmpty = !tvShows || tvShows.length === 0;

  const changeHandler = (e) => {
    e.preventDefault();
    if (e.target.value.trim() === "") setNoTvShows(false);

    setSearchQuery(e.target.value);
  };
  

  const expandContainer = () => {
    setExpanded(true);
  };

  const collapseContainer = () => {
    setExpanded(false);
    setSearchQuery("");
    setLoading(false);
    setNoTvShows(false);
    setTvShows([]);
    if (inputRef.current) inputRef.current.value = "";
  };

  useEffect(() => {
    if (isClickedOutside) collapseContainer();
  }, [isClickedOutside]);

  

  const searchTvShow = async () => {
    if (!searchQuery || searchQuery.trim() === "") return;

    setLoading(true);
    setNoTvShows(false);

    const options = {
      method: 'GET',
      url: 'https://deezerdevs-deezer.p.rapidapi.com/search',
      params: {q: searchQuery},
      headers: {
        'x-rapidapi-host': 'deezerdevs-deezer.p.rapidapi.com',
        'x-rapidapi-key': '6a99d5e101msh1e9f2b2f948746fp1ae1f3jsn6b458fe8b4e4'
      }
    };
    
    axios.request(options).then(function (response) {
      
      if (response) {
        
        if (response.data && response.data.length === 0) setNoTvShows(true);
        
        setTvShows(response.data.data);
      }
    }).catch(function (error) {
      console.error(error);
    });

    

    setLoading(false);
  };

  useDebounce(searchQuery, 500, searchTvShow);
//  console.log(tvShows);
  return (
    
    <div className="my__search">
    <SearchBarContainer
      animate={isExpanded ? "expanded" : "collapsed"}
      variants={containerVariants}
      transition={containerTransition}
      ref={parentRef}
    >
      <SearchInputContainer>
        <SearchIcon>
          <IoSearch />
        </SearchIcon>
        <SearchInput
          placeholder="Search for Series/Shows"
          onFocus={expandContainer}
          ref={inputRef}
          value={searchQuery}
          onChange={changeHandler}
        />
        <AnimatePresence>
          {isExpanded && (
            <CloseIcon
              key="close-icon"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={collapseContainer}
              transition={{ duration: 0.2 }}
            >
              <IoClose />
            </CloseIcon>
          )}
        </AnimatePresence>
      </SearchInputContainer>
      {isExpanded && <LineSeperator />}
      {isExpanded && (
        <SearchContent>
          {isLoading && (
            <LoadingWrapper>
              <MoonLoader loading color="#000" size={20} />
            </LoadingWrapper>
          )}
          {!isLoading && isEmpty && !noTvShows && (
            <LoadingWrapper>
              <WarningMessage>Start typing to Search</WarningMessage>
            </LoadingWrapper>
          )}
          {!isLoading && noTvShows && (
            <LoadingWrapper>
              <WarningMessage>No Tv Shows or Series found!</WarningMessage>
            </LoadingWrapper>
          )}
          {!isLoading && !isEmpty && (
            <>
              {tvShows.map((show) => (
                <TvShow
                  key={show.id}
                  thumbnailSrc={show.album.cover_medium}
                  name={show.title_short}
                  artist={show.artist.name}
                  
                />
              ))}
            </>
          )}
        </SearchContent>
      )}
    </SearchBarContainer>
    </div>
  );
}

export default SearchBar;

.my__search {
  margin-top: 20px;
  flex: 0.6;
  height: 450px;
  border-radius: 5px;
  border: 1px solid black;
  margin-left: 80px;
  background-color: #424242;
}

I have tvShow.jsx

import React, { useState } from "react";
import styled from "styled-components";
import {ImDownload} from "react-icons/im";

const TvShowContainer = styled.div`
  width: 96%%;
  min-height: 3em;
  display: flex;
  border-bottom: 2px solid #555555;
    align-items: center;
`;

const Thumbnail = styled.div`
  width: auto;
  height: 80%;
  display: flex;
  flex: 0.4;
  img {
    border-radius: 20px;
    width: auto;
    height: 100%;
  }
`;

const Name = styled.h3`
  font-size: 12px;
  color: white;
  flex: 2;
  display: flex;
  flex-direction: column;
`;

const Artist = styled.span`
  margin-top: 10px;
  font-size: 8px;
  color: white;
  
  display: flex;
  align-items: center;
`;

const Rating = styled.span`
  color: #a1a1a1;
  font-size: 16px;
  display: flex;
  flex: 0.2;
`;

export function TvShow(props) {
  const { thumbnailSrc, name, artist,clickedMusic } = props;
  
  const [wantedMusic, setWantedMusic] = useState("");


  // const [clickedShow, setClickedShow] = useState("");

  // function clickedContainer(e){
  //   const element = e.currentTarget();
  //   setClickedShow(element);
  //   console.log("I am clickedShow " +clickedShow);
  // }

  return (
    
    <TvShowContainer onclick="location.href='#';" >
      <Thumbnail>
        <img src={thumbnailSrc} />
      </Thumbnail>
      <Name>{name}
      <Artist>
        {artist}
      </Artist> 
      </Name>
    </TvShowContainer>
  );
}

I have mySongs.js

import React from "react";
import "./MySongs.css";

function MySongs() {
  return (
    <div className="my__songs">
      <p>Your Playlist</p>
    </div>
  );
}

export default MySongs;

.my__songs {
  margin-left: 10px;
  margin-top: 20px;
  flex: 0.3;
  height: 300px;
  height: 450px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #424242;
}
.my__songs > p {
  color: white;
  opacity: 90%;
  margin-left: 10px;
  font-size: 13px;
}