How can I call a function from an onClick in a Mapbox Popup?

I am new to Javascript, React, Mapbox and really everything I'm using to build this project. My partner and I are using React front end and Rails backend. We've not worked with Redux, hooks, or Jquery. The app is a map based site that allows you to click on a historic building in NYC, see information on that building and ultimately add that building to a Visit List.

We are able to render the information of the particular building that is clicked on and the information populates on to a Mapbox GL Popup with setHTML(). Inside the setHTML we have created a button and are trying to get the button to run a function that is being passed through props.

The on click works, we have console logged and been able to set an alert to pop up on click. The errors we run in to when we try to call a function from props is 'can't read props of undefined.' We have tried to create the function inside the component instead of passing it down through props to no avail. What we believe is happening is the onClick is living inside of a Popup function therefore it doesn't recognize props of the Map component nor does it recognize functions living within the Map component.

Is there anyway to call a function from within the Popup component?

        const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: this.style(),
            center: [this.state.lng, this.state.lat],
            zoom: this.state.zoom,
            maxZoom: 18,
            minZoom: 10,
            pitch: this.state.pitch,
            bearing: this.state.bearing,
        });

        // Setting state to match user moving around the map
        map.on("move", () => {
            this.setState({
                lng: map.getCenter().lng.toFixed(4),
                lat: map.getCenter().lat.toFixed(4),
                zoom: map.getZoom().toFixed(2),
                pitch: map.getPitch().toFixed(2),
                bearing: map.getBearing().toFixed(2),
            });
        });

        // Add polygons over buildings

        map.on("load", function () {
            // Add a source for the state polygons.
            map.addSource("buildings", {
                type: "geojson",
                data:
                    buildingUrl, 
            });

            // Add a layer showing the state polygons.
            map.addLayer({
                id: "username.styleid",
                type: "fill",
                source: "buildings",
                paint: {
                    "fill-color": "rgba(31, 146, 239, 0.4)",
                    "fill-outline-color": "rgba(145, 145, 145, 1)",
                },
            });

            // When a click event occurs on a feature in the buildings layer, open a popup at the
            // location of the click, with description HTML from its properties.
            map.on("click", "username.styleid", function (e) {
                new mapboxgl.Popup()
                    .setLngLat(e.lngLat)
                    .setHTML(
                        "<strong>Developer: </strong>" +
                            e.features[0].properties.own_devel +
                            "<br><strong>Build Type: </strong></br>" +
                            e.features[0].properties.build_type +
                            "<br><strong>Architect: </strong></br>" +
                            e.features[0].properties.arch_build +
                            "<br><strong>Style: </strong></br>" +
                            e.features[0].properties.style_prim +
                            "<br><strong>Materials: </strong></br>" +
                            e.features[0].properties.mat_prim +
                            " & " +
                            e.features[0].properties.mat_sec +
                            "<br><strong>Build Date: </strong></br>" +
                            e.features[0].properties.date_combo +
                            "<br><strong>Original Use: </strong></br>" +
                            e.features[0].properties.use_orig +
                            "<br><strong>Borough: </strong></br>" +
                            e.features[0].properties.borough +
                            "<br><strong>Historical District: </strong></br>" +
                            e.features[0].properties.hist_dist +
                            "<br><strong>Address: </strong></br>" +
                            e.features[0].properties.des_addres +
                            `<br><button class="visit-button" onClick='{console.log("I was clicked")}'</button>Add to Visit List</button></br>`
                    )
                    .addTo(map);
            });

The last few lines is where we are calling the onClick. Thanks in advance!