Как заставить react перерисовывать только один элемент при обновлении state?
При каждом вызове setNewItemData у тебя получается новый массив items. Который ты пихаешь в setItem. При каждом вызове setItem, выполнится вся твоя функция, а значит и items.map, и заново отрендерится каждый из MyItem. Если хочешь что рисовался только MyItem, то модифицируй его внутренний стейт, а не стейт родителя.

const Item = ({ item }) => {
  const [item, setItem] = useState(itemProp);

  const updateItem = useCallback(() => {
    setItem((item) => ({
      ...item,
      count: item.count + 1
    }));
  }, []);

  return (
    <div onClick={updateItem}>
      {item.title} {item.count}
    </div>
  );
};
Использовать React.memo для MyItem

export default const MyItem = React.memo(({ item, setNewItemData }) => {
   ....
});

в компоненте Test функцию setNewItemData обернуть в useCallback, чтобы она была постоянной. Для этого внутри неё использовать setItems с передачей в него функции, чтобы setNewItemData не зависело от items

let [items, setItems] = useState(myData);

    const setNewItemData = useCallback((itemId, data) => {
        setItems((items) => {
            return items.map(item => {
                if (item.id !== itemId) {
                    return item;
                }
    
                return {...item, data}
            });
        });
    }, [setItems]);