React – pass returned value to different component

I’m trying to be able to load a product in a separate child component (which is enabled when a user clicks a product from a product list rendered map on the parent component).

I’ve set up a function to .filter through the list of products so just the product at the index value (that matches the ID of the product clicked from the product list) and return it in a variable.

In Parent Component

let focussedProduct = "";

const viewProduct = (productID) => {
  focussedProduct = focusProduct.filter((e, index, array)=>{
    return index == productID
  })
  console.log(focussedProduct[0]);
};

<div className='product' key={product.id} onClick={() => viewProduct(product.id)}>

Which console logs this, so it’s returning what I need when clicking random items:

However I’m really struggling to pass the returned value/data to the child component to map it and start rendering that product, I thought it would be as easy as passing the variable like this.

Parent component

<Product 
  focussedProduct = {focussedProduct}
/>

Child component

import React, {useState} from "react";

const Product = (props) => {  
    console.log(props.focussedProduct)  
}

export default Product;    

But it’s not returning anything in the console to use/map. So I’m guessing I’m doing something wrong and I’m sure it’s simple but I’m not getting there even after doing a bit of googling. Help is much appreciated.