How to render an interactive SVG image on React?

Question

So I currently have a Flamegraph svg image rendered on my webpage (crossed out of a lot personal info with blue ink, but that shouldn't matter for the purposes of this question):

The problem is that Flamegraphs are supposed to be interactive, and currently the one above isn't. I verified this locally (I can hover and click on the orange/red/brown horizontal rectangles if I just download the flamegraph svg file and play around with it that way)

I'm currently doing a base64 "conversion"/encoding on the svg file's contents by the way.

How do I get the Flamegraph svg to be interactive?

Here's my current code:

...//(base64flamegraph is already being set here from the backend)
    return (
      <div>
        <h6>Title: </h6>
        {base64flamegraph ? (
          // <div dangerouslySetInnerHTML={{ __html: base64flamegraph }}></div>
          <img src={`data:image/svg+xml;base64,${base64flamegraph}`} alt="Flamegraph" />
        ) : (
          <div>Still loading Flamegraph SVG</div>
        )}
      </div>
    );

Edit: for the sake of a sanity check, the output of console.log(base64flamegraph): "PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgd2lkdGg9IjEyMD...."

(the string^ is MASSIVE, so not gonna post the entire thing ofc. But the pattern should be clear)

follow-up question: Do I have to convert to b64 encoding or is there a way to directly pass in the SVG HTML contents?