React Leaflet.draw: How to create draw functions with standard buttons without using the react-leaflet toolbar, however, have it written in "React"

Question

how can I create custom buttons that reside on a leaflet map in a separate control box to create "Polylines", "Polygons" or a "Marker" which will all be on separate buttons without using leaflet-draws standard UI toolbar. I really would like to know how to write it the "React" way vs. Vanilla Javascript as my whole program is written in React. If anyone could put together a simple program showing how to draw "poly-lines, polygons" etc in React with separate buttons that would be greatly appreciated.

Here is a snippit of some of my code. Thank you

<Map
  zoomControl={false}
  center={position}
  zoom={this.state.zoom}
  className={classes.height}
  ref={m => {
    this.leafletMap = m;
  }}>
  {/* LAYER CONTROL ON TOP OF MAP*/}
  <LayersControl position="topright">
    <BaseLayer checked name="OpenStreetMap.Mapnik">
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </BaseLayer>
    <BaseLayer name="OpenStreetMap.BlackAndWhite">
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                     url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
      />
    </BaseLayer>
  </LayersControl>

**CALLS OTHER COMPONENT WHICH RENDERS FEATUREGROUP, EDITCONTROL**
**<Mapediting save={this.setSave} myIcon={myIcon} />**

  <ZoomControl position="topright" />
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {/* show users general area */}
  <Marker position={position} icon={myIcon} title="Your Position" draggable={true}>
  {/* <Popup>
        Your Mapped Location <br /> Lat: {this.state.location.lat} 
                                    Long: {this.state.location.lng}  
      </Popup> */}
  </Marker>
</Map>

Other Component

const mapSelectors = myIcon => (
    <FeatureGroup>
        <EditControl
            style={{ backgroundColor: "blue" }}
            onCreated={event => _onCreate(event)}
           

            draw={{
                polyline: {
                    shapeOptions: { color: "red" },
                    allowIntersection: false,
                    showLength: true,

                    metric: false,
                    feet: false
                },
                polygon: {
                    allowIntersection: false,
                    shapeOptions: { color: "blue" },
                    edit: false,
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                rectangle: {
                    shapeOptions: { color: "green" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                circle: {
                    shapeOptions: { color: "magenta" },
                    showLength: true,
                    metric: false,
                    feet: false,
                    showArea: true
                },
                marker: { zIndexOffset: "999", edit: true, icon: myIcon }
            }}
        />
        {/* {(L.drawLocal.draw.toolbar.buttons.polygon = "draw")} */}

        <Circle center={[51.51, -0.06]} radius={200} />
    </FeatureGroup>
);

class MapEditing extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            draw: false
        };
    }
 render() {
        const { classes, save, myIcon } = this.props;

        return (
            
                        {this.state.draw && mapSelectors()}
)
``` Additional form code not shown