как добавить код в тег react-syntax-highlighter из другого компонента

Question

У меня есть компонент React, который называется"UploadButton"который позволяет пользователю выбирать и загружать ZIP-файл. Когда файл загружен, компонент извлекает определенный файл JSON из ZIP и преобразует его в строку. Мне нужно найти способ отобразить эти строковые данные JSON в компоненте, но когда я пытаюсь использоватьappendилиprependметодов для добавления данных в файл JSON отображается как обычный текст без подсветки синтаксиса или разметки. Как я могу правильно отобразить строковые данные JSON вSyntaxHighlighterкомпонент с правильной подсветкой синтаксиса и примененной разметкой?

вот часть моего кода.

      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>
  );
}

а вот функция, которая вызывается из UploadButton для добавления значения кода.

      const appendflowData = (data) => {

    alert("file uploaded ")

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

}