Почему мой мемоизированный компонент React все еще перерисовывается?

Question

Я пытаюсь понять React.memo, но немного озадачен. Думал, что вариант использования предотвращает повторную визуализацию путем запоминания компонента? У меня есть мемоизированный ребенок, который все еще каждый раз перерисовывается.

--Приложение

---- Домой [обновляет состояние нажатием кнопки]

------ Дочерний объект [запомнен для предотвращения повторного рендеринга, но все равно каждый раз повторно рендерится]

На мой взгляд, поток должен работать так:

• пользователь нажимает кнопку
• Дом обновляет местное состояние, увеличивается число +1
• это вызывает повторный рендеринг компонента и его дочерних элементов
• запомненный компонент возвращается, либо отображается старый журнал консоли, либо ничего не отображается, потому что аргументы для этого компонента не изменились.

Что на самом деле происходит:

• пользователь нажимает кнопку
• Дом обновляет местное состояние, увеличивается число +1
• это вызывает повторный рендеринг компонента и его дочерних элементов
• запомненный компонент возвращается, выходит из системы заново.

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 каждый раз появляется новый / свежий, потомок каждый раз перерисовывается...

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>
    )
}

Я что-то не понял?