how do I add code to react-syntax-highlighter tag from a different component

Question

I have a React component called "UploadButton" that allows a user to select and upload a ZIP file. When the file is uploaded, the component extracts a specific JSON file from the ZIP and converts it into a string. I need to find a way to display this JSON string data in a SyntaxHighlighter component, but when I try to use the append or prepend methods to add the data to the SyntaxHighlighter, the JSON is displayed as plain text without any syntax highlighting or markup. How can I properly display the JSON string data in the SyntaxHighlighter component with proper syntax highlighting and markup applied?

here is some of my code.

return (
   <div className="App">

      <SideNav></SideNav>
      <TopBar className="home_content"></TopBar>

      <div className="Panels">
        <div className="jsonPanel">
          <SyntaxHighlighter id="jsonText" language="JSON" style={docco}>

          </SyntaxHighlighter>
        </div>
        <div className="infopanel">
          details
        </div>
      </div>
    </div>
  );
}

and here is the function that is call from UploadButton to add the code value.

const appendflowData = (data) => {

    alert("file uploaded ")

    $("#jsonText").prepend(JSON.stringify(data,undefined,4))

}