feat: add toast index to ToastRegion render props

[Zertz]

This is useful when toasts can be rendered differently based on their index in the queue. For example, when multiple toasts are displayed, the first one could be on top, and the others could be rendered behind it with an offset so there's a visual hint that multiple toasts are active, and apply transforms (i.e. scale) so toasts beyond the first one appear smaller.

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[Pearce-Ropion]

This seems like something you could achieve with css nth sibling selectors.

[Zertz]

Sure but it'd be inconvient at best because the notification queue has an arbitrary length and every index has different transforms. Here's a simplified version of what we're looking to achieve:

*:nth-child(2) {
  transform: scale(0.95);
}

*:nth-child(3) {
  transform: scale(0.90);
}

*:nth-child(4) {
  transform: scale(0.85);
}

*:nth-child(5) {
  transform: scale(0.80);
}

/* ... */

Perhaps I'm missing something and there's a better way to do this in CSS?