How to prevent unnecessary renders when checking a checkbox?

I'm trying to create performant checkbox tree component. I have a parent level state to hold list of checked checkbox IDs =>

const [selected, setSelected] = useState([]);

and when toggling a checkbox its ID is added or removed to/from that array. I'm passing boolean to each checkbox which controls the checked state =>

checked={selected.includes(hole.id)}

Checkbox -input is separated to a own CheckboxNode component.

When not using React.memo for the CheckboxNode component I can always see each checkbox from the same parent triggering console.log() even only one is clicked/toggled

When using React.memo with following check I see 1-3 renders when toggling the checkboxes =>

const areEqual = (prev, next) => prev.checked === next.checked;

Also the visual states changes really peculiarly and the component feel really buggy.

How could I achieve great performance and getting rid of extra renders in a setup like this? I added the code here so anyone can take a better look: https://codesandbox.io/s/shy-frog-4wjrg?file=/src/CheckboxNode.js