Inaccessible this.props outside of component class

help
1

I have a data which to be passed down to the child components as follow

import { Component } from 'react';
import Right from './Right';

export default class MainSection extends Component {
  render() {
    return (
      <div className="columns is-gapless main">
        <Right data={this.props.data}/>
      </div>
    );
  }
};

and I need to get the details of this.props.data outside than component class. See below

import { Component } from 'react'

Meteor.startup(function() {
  Mapbox.load({
    gl: true
  });
});

Tracker.autorun(function () {
  if (Mapbox.loaded()) {
    if (!mapboxgl.supported()) {
      alert('Your browser does not support Mapbox GL');
    } else {
      mapboxgl.accessToken = Meteor.settings.public.accessToken;
      var map = new mapboxgl.Map({
        container: 'map',
        zoom: 13,
        style: 'mapbox://styles/mapbox/streets-v8',
        hash: false,
        center: [101.511249, 3.156924]
      });
      
      map.on('style.load', function () {
        map.addControl(new mapboxgl.Navigation({position: 'bottom-left'}));   
        map.addSource("markers", {
            "type": "geojson",
            "data": this.props.data
        });

        map.addLayer({
            "id": "markers",
            "type": "symbol",
            "source": "markers",
            "layout": {
                "icon-image": "marker-15",
                "text-field": "{title}",
                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                "text-offset": [0, 0.6],
                "text-anchor": "top"
            }
        });
      });

      map.on('click', function (e) {
          var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
          if (features.length) {
              map.flyTo({center: features[0].geometry.coordinates});
          }
      });
    }
  }
});

export default class Right extends Component {
  render() {
    return (
      <div className="column for-map">
        <RightNav/>
        <div id="map" className="map_canvas mapbox"></div>
      </div>
    );
  }
};

from the above code, how do I get the details of this.props.data within Tracker

map.addSource("markers", {
    "type": "geojson",
    "data": this.props.data
});

Appreciate your helps