[Solved]-how to get selected item in an array from another functional component react-Reactjs

Answer:

In DestinationCard.tsx

<DestinationInfo DestinationInCountry= {DestinationInCountry} selected= {selected}/>

And

import Image from "next/image";
import styles from './DestionationInfo.module.scss';

export interface DestinationPlacesProps {
    DestinationInCountry;
    selected;
}

const DestinationInfo: React.FC<DestinationPlacesProps> = (props) => {
    return(
        <>
        <div className={styles.card_wrapper}>
            <div>
            <Image
                src={props.DestinationInCountry[props.selected].imageSrc}
                alt="world pinoy flights - destinations"
                width={400}
                height={400}
               
              />
            </div>
        </div>
        </>
    )
}

export default DestinationInfo;

You are passing an array.

const [selected, setSlected] = useState('')

//Add an handle for button

const handler = (id) => {
   setSelected(id)
   setOpen(true)
}

<DestinationInfo selected ={selected}/>

DestinationInCountry is an array. So add index to get imageSrc

src={props.DestinationInCountry[0].imageSrc}