Optimize component in React js, so that items are not rendered every time

Question

When i select item all items are re-rendered. How can I make it render only the one I change. Only state that is changing is 'selected'. Items are always same. So how can i make that only one item is gonna re-rendered base on 'selected' state. Im passing in Item component 'selected' state and i think there is problem that i dont get it.

import { memo, useState } from "react";

const items = Array(100)
  .fill(null)
  .map((item, index) => {
    return { ...item, id: crypto.randomUUID(), name: `hello - ${index + 1}` };
  });

const App = () => {
  const [selected, setSelected] = useState<string[]>([]);

  const selectHandler = (isIncluded: boolean, id: string) => {
    if (isIncluded) {
      setSelected(prev => prev.filter(idx => idx !== id));
    } else {
      setSelected(prev => [...prev, id]);
    }
  };

  const MemoizedItem = memo(Item);

  return (
    <div className="flex flex-col gap-5 items-center justify-center py-10">
      {items.map(item => (
        <MemoizedItem
          key={item.id}
          data={item}
          selected={selected}
          selectHandler={selectHandler}
        />
      ))}
    </div>
  );
};

export default App;

type PropsItem = {
  data: { id: string; name: string };
  selected: string[];
  selectHandler: (isSelected: boolean, id: string) => void;
};

const Item = ({ data, selected, selectHandler }: PropsItem) => {
  return (
    <div className="cursor-pointer min-w-[170px] text-center p-2">
      {selected.includes(data.id) ? (
        <s className="text-2xl" onClick={() => selectHandler(true, data.id)}>
          {data.name}
        </s>
      ) : (
        <p className="text-2xl" onClick={() => selectHandler(false, data.id)}>
          {data.name}
        </p>
      )}
    </div>
  );
};

I tried using memo and useCallback but in this case is not working. Im clueless. Im learning and still dont get it.