Как убрать ререндер дочерних компонентов?

Столкнулся с проблемой ререндера дочерних компонентов. Суть в том, что в родительском компоненте объявляю обработчик, который должен будет отрабатывать при нажатии на кнопку. Сам обработчик, обновляет несколько стейтов, один из которых является массивом объектов. Его прокидываю через пропсы в дочерние.

В итоге, вроде как понимаю, что обработчик нужно мемоизировать с использованием useCallback, потому что из-за него каждый раз ререндерятся компоненты, но никак не могу получить желаемый результат. Может стоит вынести этот обработчик куда-нибудь или наоборот объявить отдельно в каждом компоненте.

Родильский компонент:

const ItemList = ({ userBalance, setUserBalance }) => {
  const [items, setItems] = useState(products);

  const onBuyItem = (product) => {
    setUserBalance((prev) => prev - product.price);
    const updatedItems = items.map((item) => {
      if (item.id === product.id) {
        return { ...item, count: item.count - 1 };
      }
      return item;
    });
    setItems(updatedItems);
  };

  return (
    <div className="item-list">
      {items.map((item) => (
        <ItemCard
          key={item.id}
          item={item}
          isCanBuy={userBalance >= item.price && item.count}
          onBuyItem={onBuyItem}
        />
      ))}
    </div>
  );
};

Дочерний:

const ItemCard = React.memo(({ item, isCanBuy, onBuyItem }) => {

  return (
    <div className="item-card">
      <span className="item-card-title">{item.title}</span>
      <span className="item-card-count">
        {item.count ? `IN STOCK: ${item.count}` : "SOLD OUT"}
      </span>
      <img
        className="item-card-img"
        src={"./img/" + item.imgUrl}
        alt={item.imgAlt}
      />
      <span className="item-card-price">{item.price}₽</span>
      <button
        className="item-card-button"
        disabled={!isCanBuy}
        onClick={() => onBuyItem(item)}
      />
    </div>
  );
});