You can get the mapbox-gl map object once the component mounts, then you can work with it directly. Try something like this:

class MapPage extends Component {
      constructor(props) {
        super(props);
         this.state = {
          viewport: {
           latitude: 38.63738602787579,
           longitude: -121.23576311149986,
           zoom: 6.8,
           bearing: 0,
           pitch: 0,
           dragPan: true,
           width: 600, 
           height: 600 
         }
        };
       }
    componentDidMount(){
      const map = this.reactMap.getMap();
      map.on('load', () => {
       //add the GeoJSON layer here
       map.addLayer({...})
      })
    }

    render() {
      const { viewport } = this.state;

      return (
        <ReactMapGL
          ref={(reactMap) => this.reactMap = reactMap} />
          {...viewport}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          onViewportChange={newViewport => {
            this.setState({ viewport: newViewport });
          }}
        />
      );
     }
    }

React Refs: https://reactjs.org/docs/refs-and-the-dom.html

GetMap(): https://uber.github.io/react-map-gl/#/Documentation/api-reference/static-map?section=methods

To load GeoJSON file via d3-fetch library:

1) import json function: import { json } from 'd3-fetch'

2) now file content could be downloaded like this:

json("data/us-income.geojson")
.then((data) => {
    //...
});

Here is an official example adapted for react-map-gl library:

const MAPBOX_TOKEN =
  "--YOUR_KEY-GOES-HERE--"; // 
const SOURCE_ID = "national-park";

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      viewport: {
        latitude: 40.492392,
        longitude: -121.403732,
        zoom: 11
      }
    };

    this.mapRef = React.createRef();
    this.handleMapLoaded = this.handleMapLoaded.bind(this);
    this.handleViewportChange = this.handleViewportChange.bind(this);
  }

  handleViewportChange(viewport) {
    this.setState({ viewport });
  }


  handleMapLoaded() {
    const map = this.mapRef.current.getMap();

    json("data/national-park.json")
    .then((data) => {
      this.initMapData(map, data);
    });

  }

  render() {
    const { viewport } = this.state;

    return (
      <div style={{ height: "100%" }}>
        <MapGL
          ref={this.mapRef}
          onLoad={this.handleMapLoaded}
          mapStyle="mapbox://styles/mapbox/outdoors-v11"
          width="100%"
          height="480px"
          {...viewport}
          onViewportChange={this.handleViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </div>
    );
  }

  initMapData(map, data) {
    map.addSource(SOURCE_ID, data);
    map.addLayer({
      id: "park-boundary",
      type: "fill",
      source: "national-park",
      paint: {
        "fill-color": "#888888",
        "fill-opacity": 0.4
      },
      filter: ["==", "$type", "Polygon"]
    });

    map.addLayer({
      id: "park-volcanoes",
      type: "circle",
      source: "national-park",
      paint: {
        "circle-radius": 6,
        "circle-color": "#B42222"
      },
      filter: ["==", "$type", "Point"]
    });
  }
}

Here's a solution with react-map-gl and mapbox-gl-draw. At this point, nebula.gl and the forked successor @deck.gl-community/editable-layers should not be used as they are both unmaintained.

We'll use react-map-gl's draw-polygon example:

https://github.com/visgl/react-map-gl/tree/master/examples/mapbox/draw-polygon

Unfortunately, that example provides no means to load existing geometries that can then be modified or added to.

The most important changes to be made are in DrawControl. We make theMapboxDraw object accessible from up in the component tree with use of forwardRef() and useImperativeHandle()

import { forwardRef, useImperativeHandle } from 'react';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { useControl } from 'react-map-gl';

const DrawControl = forwardRef((props, ref) => {
  const drawRef = useControl(
    () => new MapboxDraw(props),
    ({ map }) => {
      map.on('draw.create', props.onCreate);
      map.on('draw.update', props.onUpdate);
      map.on('draw.delete', props.onDelete);
      map.on('draw.modechange', (evt) => {
        console.log('on', evt.mode);
      });
    },
    ({ map }) => {
      map.off('draw.create', props.onCreate);
      map.off('draw.update', props.onUpdate);
      map.off('draw.delete', props.onDelete);
      map.off('draw.modechange', (evt) => {
        console.log('off', evt.mode);
      });
    },
    {
      position: props.position,
    },
  );

  useImperativeHandle(ref, () => drawRef, [drawRef]);

  return null;
});

export default DrawControl;

This makes the MapboxDraw object available for use up in the component tree as drawRef.current. In my higher up component below, I create the drawRef, pass said drawRef to DrawControl and then use useEffect() to add my feature collection once the reference is available

const EditableMap = (props) => {
  const drawRef = useRef(null);

  const myFeatureCollection = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: // geometry
      }
    ],
  }

  useEffect(
    () => {
      drawRef.current.add(myFeatureCollection});
    },
    [drawRef.current]
  );

  return (
    <Map
      mapboxAccessToken={REACT_APP_MAPBOX_ACCESS_TOKEN}
      initialViewState={{ ...DEFAULT_VIEWPORT, ...initialViewState }}
      style={style}
      mapStyle={mapStyle}
    >
      <DrawControl
        ref={drawRef}
        position='top-left'
        displayControlsDefault={false}
        controls={{
          polygon: true,
          trash: true,
        }}
        defaultMode={SIMPLE_SELECT_MODE}
        onCreate={onDrawUpdate}
        onUpdate={onDrawUpdate}
        onDelete={onDrawDelete}
        styles={MAPBOX_DRAW_STYLES}
      />
    </Map>
  );
};

Your source data consists of only points yet in your Layer you've set type="fill". Fill type only applies to polygons not points or lines. You'll want to add either a circle or symbol layer instead for points.

You can do it in couple ways.

- Import geojson in react

Change geojson file extension to json

import oregon_local from './assets/oregon.json'
...
<Source id="oregonjson" type="geojson" data={oregon_local} >
...

This way is ok if your geojson file file is rather small, because it will be bundled into your javascript.

- Use mapbox data loading

Place your geojson file in public/data folder

<Source type="geojson" data="/data/oregon.geojson" >
...