@reach/descendants README

[Brennvo]

I was reading the @reach/descendants package README and came across this snippet:

Had we stuck to elements, we could have done this:

<Menu>
  <MenuItem className="bg-white" onSelect={download}>
    <DownloadIcon /> Download
  </MenuItem>
  <MenuItem className="bg-white" onSelect={save}>
    <SaveIcon /> Save
  </MenuItem>
  <MenuItem
    className="bg-white"
    onSelect={preview}
    aria-label="Preview Invoice"
  >
    <PreviewIcon /> Preview
  </MenuItem>
</Menu>

But how will the MenuItem components know their index?

In this situation, couldn't the MenuItem component just receive it's index since we know it at declaration time? That is:

<Menu>
  <MenuItem index={0} className="bg-white" onSelect={download}>
    <DownloadIcon /> Download
  </MenuItem>
  <MenuItem index={1} className="bg-white" onSelect={save}>
    <SaveIcon /> Save
  </MenuItem>
  <MenuItem
    index={2}
    className="bg-white"
    onSelect={preview}
    aria-label="Preview Invoice"
  >
    <PreviewIcon /> Preview
  </MenuItem>
</Menu>

I can see where this would be an issue if something were to be dynamic, but in the case of composite widgets, I don't foresee a situation in which a descendant would render conditionally. I am curious to hear about why this approach might not be optimal.