Prevent Child Rerendering if Parent is Rerendered Using Hooks

My bestSellerDummy data doesn't change, so I'd like to prevent the same Product child to be rerendered if parent rerenders. I have tried using useMemo in parent and React.memo in child but no luck, it's still showing log 'Rendering Product component..' every time parent rerenders. What am I missing here? Please advice.

Note: Parent is expected to be rerendered every time I call addToCart function (of CartContext) in a Product component.

Edit:I'm using CartContext, maybe related to this, I'm not sure. Here is the sandbox: https://codesandbox.io/s/dazzling-moore-po1c6?file=/src/App.js

Home.tsx

const [bestSellerDummy] = useState(  [...new Array(5)].map((item, key) => ({    id: key,    imageUri:'https://1.jpg',    name: 'My Dummy 1',    price: 25,  })),);const bestSellers = useMemo(() => {  return bestSellerDummy.map((productDummy, key) => {    return (<Product key={key} product={productDummy} />    );  });}, [bestSellerDummy]);return (  ...  {bestSellers}  ...)

Product.tsx

const Product: FunctionComponent<IProductProps> = (  productProps,) => {  ...  console.log('Rendering Product component..');  ...}export default React.memo(Product);