Use React Components Names (Breadcrumbs, Replays)

[krystofwoldrich]

Description

Current TouchEvents implementation uses sentry-label, user-defined-label or displayName to record what element in the React components tree was interacted with.

We can enhance this by using React Component Names generated by @sentry/babel-plugin-component-annotate

### Tasks
- [ ] https://github.com/getsentry/sentry-react-native/issues/2863
- [ ] Verify [@sentry/babel-plugin-component-annotate](https://www.npmjs.com/package/@sentry/babel-plugin-component-annotate) works with RN (app builds, extra prop is available in runtime)
- [ ] https://github.com/getsentry/sentry-react-native/issues/3289
- [ ] Compare plugin data and improved RN components
- [ ] If Babel plugin is needed add it to `metro.config.js` using [`withSentryConfig()`](https://github.com/getsentry/sentry-react-native/blob/0b424725e8453a646513982890ab2a3c66b92c61/src/js/tools/metroconfig.ts#L15) (components names enabled by default)
- [ ] Update [TouchEvents](https://github.com/getsentry/sentry-react-native/blob/0b424725e8453a646513982890ab2a3c66b92c61/src/js/touchevents.tsx#L197-L227) to use Component Names when available
- [ ] Add RN specific does explaining component names (how this plugin is part of `withSentryConfig()`, if used) ([JS docs for reference](https://docs.sentry.io/platforms/javascript/guides/react/features/component-names/))