I Am trying to figure out how can I add the items to watchlist,

The steps am trying to carry out here are, when a user clicks on add button, the items should be added to the watchlist page/component which I have created.

Please see the hierarchy of the component. I would like to show added items on the watchlist page.

[![enter image description here](https://i.stack.imgur.com/13iCM.png)](https://i.stack.imgur.com/13iCM.png)

Please see the code I tried.

```
const [watchlist, setWatchlist] = useState ([]);

const handleWatchlist = (movieData) => {
   const newList = [...watchlist, movieData]
   setWatchlist(newList)
   console.log(newList)
}

<Button className = {classes.cardButton}size = "small" onClick = {  ()=> handleWatchlist(movie) }> Add </Button>

```

When I try to inspect, the result is, it shows the items are added on the console as well into the state but can not pass on to the watchlist component? How can I use a prop to pass this value and show them in the watchlist component? or is its props not the right way to pass any object into a component?

[![![enter image description here](https://i.stack.imgur.com/n6PBT.png)](https://i.stack.imgur.com/n6PBT.png)

The result on the console is as below.

[![enter image description here](https://i.stack.imgur.com/clGI6.png)](https://i.stack.imgur.com/clGI6.png)

Any help is really appreciated.
Please find the link to the full code below

<https://codesandbox.io/s/determined-nightingale-m2mtn?file=/src/components/Products/Watchlist.jsx>

Thanks a million