Fetching the constant value from a component in react to another page - reactjs

Question

I have a component NFTCard as below, that displays images as card
import React, {useCallback, useState} from "react";
const NFTCard = ({nft}) => {
const [image, setImage] = useState(null);
const handleImage = useCallback(event => {
setImage(event.target.src)
console.log(event.target.src)
console.log(image)
},[image])
return(
//Wrapping the image in a card
<div className="rounded overflow-hidden shadow-lg">
<img className= "object-contain h-50 w-50"
src={nft.meta.image.url.ORIGINAL}
alt={nft.meta.name}
onClick= {handleImage}
/>
<div className="px-1 py-1">
<div className="font-bold text-xs mb-0">{nft.meta.name}</div>
</div>
</div>
)
}
export default NFTCard
What I am trying to do here is whenever an image on a card is clicked, I wish to display it again as an enlarged form in another div element
Here is my main page where i am displaying the image
import Link from 'next/link';
import { useWeb3Context } from '../../context'
import { Web3Address, Web3Button } from '../../components';
import React, { useEffect, useState } from 'react';
import NFTCard from '#/components/NFTCard';
import {useRouter} from 'next/router';
//render only the web3 button if the user is not connected to the web3 provider
const renderNotConnectedContainer = () => (
<div>
<p>Connect Wallet to continue</p>
</div>
);
export const ChooseProductView = () => {
const router = useRouter();
const { address } = useWeb3Context()
const [nfts, setNfts] = useState([]);
// Function to get the details of the NFTs held in the Wallet
const fetchNFTs = async () =>
{
const accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
const response = await fetch(`https://ethereum-api.rarible.org/v0.1/nft/items/byOwner?owner=${accounts[0]}&size=100`)
//limiting the size to 100 so that there is not too much data to fetch
const data = await response.json()
setNfts(data.items)
console.log(data.items)
}
//creating a useEffect to fetch the NFTs details which is an async function
useEffect(() => {
const getNFTs = async () => {
await fetchNFTs()
}
getNFTs()
}, [])
if(!address){
return renderNotConnectedContainer()
}
else{
//rendering the NFTs details via the NFTContainer component
return(
<div className="flex flex-row">
<div className="basis-1/4"> {/*Splitting the screen into 3 parts*/}
<br/>
<div className = "container mx-auto">
<div className="grid grid-cols-2 gap-2 auto-rows-max">
{/*Calling the NFTCard component to render the NFTs details*/}
{nfts.map((nft, index) => {
return <NFTCard nft={nft} key= {index}/>
})
}
</div>
</div>
</div>
<div className="basis-1/2">
<div className="max-w-lg container mx-auto">
<img className="w-full" src={`${router.basePath}/assets/images/Hoodie black label.jpg`} alt="Empty Hoodie"/>
<div className="px-4 py-6">
</div>
</div>
</div>
<div className="basis-1/4">
<Web3Address/>
</div>
</div>
)
}
};
How do i fetch the image url stored in NFTCard with use state into a div element in ChooseProductView?
Thanks a lot in advance