When I click an item for change only this state value. But then re-render rest item, although I use memo. How to prevent re-render rest items.

App.js

const App= ()=> {
  const [items, setItems] = useState({
   [`item-1`]: {
     h: 100,
     w: 100
  },
  [`item-2`]: {
     h: 200,
     w: 200
  }
  const changeProp = (d)=>{
   const getElement = d.currentTarget;
   const itemKey = getElement.getAttribute('data-key');

   const deepCopy = JSON.parse(JSON.stringify(items));
   deepCopy.[itemKey] ={
        h: rect.height,
        w: rect.width,
   }
   setItems(deepCopy);
  }
  const getItems = Object.entries(items);
  return (
    <div>
      { getItems.map( (d,i) => <Item data={d} key={i} changeProp={changeProp}/> ) }
    </div>
  );
}

Item.js

const Item = ({data, changeProp}) => {
 return (
        <div className="eachItem" id={getKey} data-key={getKey} onClick={e=>changeProp(e)}>
            item
        </div>
    );
}
export default memo(Item);