use correct parentchild relationship

Author: AbhiPrasad

packages/react/src/profiler.tsx

@@ -1,4 +1,4 @@
-import { getActiveSpan, startInactiveSpan } from '@sentry/browser';
+import { Scope, getActiveSpan, startInactiveSpan } from '@sentry/browser';
 import type { Span } from '@sentry/types';
 import { timestampInSeconds } from '@sentry/utils';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -82,7 +82,10 @@ class Profiler extends React.Component<ProfilerProps> {
       const changedProps = Object.keys(updateProps).filter(k => updateProps[k] !== this.props.updateProps[k]);
       if (changedProps.length > 0 && !this._updateSpan) {
         const now = timestampInSeconds();
+        const scope = new Scope();
+        scope.setSpan(this._mountSpan);
         this._updateSpan = startInactiveSpan({
+          scope,
           name: `<${this.props.name}>`,
           op: REACT_UPDATE_OP,
           origin: 'auto.ui.react.profiler',
@@ -91,7 +94,6 @@ class Profiler extends React.Component<ProfilerProps> {
             changedProps,
             'ui.component_name': this.props.name,
           },
-          parentSpanId: this._mountSpan.spanContext().spanId,
         });
       }
     }
@@ -204,13 +206,15 @@ function useProfiler(
     return (): void => {
       const endTime = timestampInSeconds();
       if (mountSpan && options.hasRenderSpan) {
+        const scope = new Scope();
+        scope.setSpan(mountSpan);
         const renderSpan = startInactiveSpan({
+          scope,
           name: `<${name}>`,
           op: REACT_RENDER_OP,
           origin: 'auto.ui.react.profiler',
           startTimestamp: mountSpan.endTimestamp,
           attributes: { 'ui.component_name': name },
-          parentSpanId: mountSpan.spanContext().spanId,
         });
         if (renderSpan) {
           renderSpan.end(endTime);