How I can add a legend in a mapbox map in react?

I have seen examples in HTML but I dont know how to do it in react. I had tried this but it doesnt work

map.mapboxgl.legendControl({ position: 'topright' }).addLegend('My walk from the White House to the hill!').addTo(map);