How to update card name when clicking on card in React JS - reactjs

Question

I am building this app in React Js where i can search for a specific card and once i click on that card the card info section gets updated with the card name, description and image. I have 1 parent component called Decks that contains 2 child components called Search and within Search i have another component called CardsFiltered. The issue i am facing is passing data from child component to its parent component up the tree. How can i tackle this issue? Any idea's will be appreciated.
Decks.js
import React, { useEffect, useState } from 'react'
import { DragDropContext } from 'react-beautiful-dnd'
import CardsSearch from './CardsSearch'
import Search from './Search'
function Decks(props) {
const image = require('../images/blue-eyes-white-dragon.png')
const [name, setName] = useState()
useEffect(() => {
window.addEventListener('storage', (e) => {
const localName = localStorage.getItem('items')
console.log(localName)
this.setName(localName)
})
}, [])
return (
<div className='h-screen w-full flex flex-row'>
<div className='flex flex-row h-full w-full'>
<div className='flex flex-col h-full w-[55rem] gap-6 p-4'>
<div className='flex border-solid border-2 border-black p-2'>
<h1 onChange={(e) => setName(e.target.value)}>{name}</h1>
</div>
<div className='flex justify-center w-[16rem]'>
<img src={image} loading="lazy" />
</div>
<div className='flex flex-row border-black border-solid border-2 p-2'>
<p>Card Desc</p>
</div>
</div>
<div className='flex flex-col w-[100rem] gap-3 p-4'>
<div className='flex flex-row justify-between border-black border-solid border-2 p-2'>
<div>
<p>Main [40]</p>
</div>
<div className='flex flex-row gap-3'>
<p>NM[6]</p>
<p>EM[17]</p>
<p>SP[13]</p>
<p>TR[4]</p>
</div>
</div>
<div className='flex flex-row flex-wrap border-black border-2 border-solid'>
<DragDropContext>
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
</DragDropContext>
</div>
<div className='flex flex-row justify-between border-black border-solid border-2 p-2'>
<div>
<p>Extra [11]</p>
</div>
<div className='flex flex-row gap-3'>
<p>FM[6]</p>
<p>SM[6]</p>
<p>XYZ[2]</p>
<p>RM[1]</p>
</div>
</div>
<div className='flex flex-row flex-wrap border-black border-2 border-solid'>
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
</div>
<div className='flex flex-row justify-between border-black border-solid border-2 p-2'>
<div>
<p>Side [13]</p>
</div>
<div className='flex flex-row gap-3'>
<p>NM[6]</p>
<p>EM[17]</p>
<p>SP[13]</p>
<p>TR[4]</p>
</div>
</div>
<div className='flex flex-row flex-wrap border-black border-2 border-solid'>
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
<img src={image} alt="Card" className='w-20' />
</div>
</div>
<div className='flex flex-col w-[45rem] overflow-y-auto'>
<div className='flex flex-col'>
<Search getName={name => setName(name)} />
</div>
</div>
</div>
</div>
)
}
export default Decks
Search.js
import React, { useState, Suspense } from 'react'
import { useRef } from 'react'
//import CardsFiltered from './CardsFiltered'
const CardsFiltered = React.lazy(() => import('./CardsFiltered'))
function Search(props) {
const [inputText, setInputText] = useState("")
let inputHandler = (e) => {
var lowerCase = e.target.value.toLowerCase()
setInputText(lowerCase)
}
const clickPoint = useRef();
const handleFocus = () => {
clickPoint.current.style.display = "none";
};
const handleBlur = () => {
clickPoint.current.style.display = "block";
};
const [cardName, setCardName] = useState()
return (
<>
<div className="items-center py-6 px-4 flex justify-center" >
<div className="relative mr-3">
<div className="absolute top-3 left-3 items-center" ref={clickPoint}>
<svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd"></path></svg>
</div>
<input
type="text"
className="block p-2 pl-10 w-70 text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:pl-3"
placeholder="Search Here..."
onFocus={handleFocus}
onBlur={handleBlur}
onChange={inputHandler}
/>
</div>
</div>
<div>
<Suspense fallback={<div>Loading...</div>}>
<CardsFiltered input={inputText} onMouseOver={() => props.getName(cardName)} getCardName={cardName => setCardName(cardName)}/>
</Suspense>
</div>
</>
)
}
export default Search
CardsFiltered.js
import React, { useEffect, useState } from 'react'
import Cards from '../../JsonData/FormattedData.json'
import { AiFillStar } from 'react-icons/ai';
function CardsFiltered(props) {
const filteredData = Cards.data.filter((e) => {
if (props.input === '') {
return e
}
else {
//console.log(e)
return e.name.toLowerCase().includes(props.input)
}
})
let lastIndex = 50
const [name, setName] = useState()
useEffect(() => {
localStorage.setItem('items', JSON.stringify(name))
//console.log(name)
}, [name])
return (
<>
<div className='flex justify-center align-middle px-4 overflow-y-auto overflow-x-hidden font-normal'>
<div className='box-border h-auto w-[35rem] border-2 border-slate-600 flex flex-col justify-center align-middle'>
{filteredData.splice(0, lastIndex).map((card) => {
return (
<div key={card.id} onMouseOver={() => setName(card.name)} className='flex h-full w-full justify-center align-middle box-border border-2 gap-3 overflow-auto myCard'>
<div className='flex h-40 w-56 justify-center align-middle'>
<img src={card.card_images[0].image_url_small} className='w-auto h-auto' alt="Yugioh Card Image" loading='lazy'
/>
</div>
<div className='flex flex-col justify-center align-middle w-full'>
<h4><b>{card.name}</b></h4>
<p>{card.attribute}/{card.race}</p>
<span><AiFillStar/> {card.level}</span>
<p>{card.atk}/{card.def}</p>
</div>
</div>
)
})}
</div>
</div>
</>
)
}
export default CardsFiltered
I understand this can be done with the state hook and/or with props but so far no luck using props.