Why is my memoized React component still re-rendering?

I'm trying to understand React.memo but a bit puzzled. Thought the use case was preventing re-renders by memoizing the component? I have a memoized Child that is still being re-rendered every time.

--App

----Home [updates state via button click]

------Child [memoized to prevent re-renders but still re-rendering every time]

To my mind, the flow should work like this:

• user clicks button
• Home updates local state, increments number +1
• this triggers re-render of component and its children
• the memoized component is returned, old console log either appears or nothing appears because args havent changed for that component.

Whats actually happening:

• user clicks button
• Home updates local state, increments number +1
• this triggers re-render of component and its children
• the memoized component is returned, logs out afresh.

const MemoizedChild = React.memo(ShoppingBasket);

function Home() {

    const [ myNum, updateMyNum ] = useState(0);

  return (
    <div className="home__container">
        I am the home page
        <p>myNum {myNum}</p>
        <button onClick={() => updateMyNum(myNum + 1)}>Add Number</button>
        <MemoizedChild items={[1, 2, 3, 4]} total={900} />
    </div>
  );
}

log appears new/fresh each time, child re-rendered every time...

function ShoppingBasket({ total, items }) {
    console.log("Re Rendered Shopping Basket" + Date.now());
    return (
        <div className="basket__container">
            <h4 className="basket__heading">Shopping Basket</h4>
            <p className="basket__info">Total: ${total}</p>
            <p className="basket__info">No. of Items: {items.length}</p>
        </div>
    )
}

Have i misunderstood something?