javascript - 反応コンポーネントにhighlight.jsをインポートする方法は?

Question

React.js コンポーネントで「JSON」データを表示して強調表示したいと思います。

動作しますが、問題は、コンポーネントが更新されると、強調表示されたコードが消えることです。

私はここで初心者であることを明確にしたいと思います。

ご支援いただきありがとうございます。

import React from "react";

import hljs from "highlight.js";
import "highlight.js/styles/github.css";
import json from "highlight.js/lib/languages/json";
hljs.registerLanguage("json", json);
hljs.initHighlightingOnLoad();

const JsonViewer = props => {
  return (
    <pre>
      <code className="json">
         {JSON.stringify(props.content, null, 2)}
      </code>
    </pre>
  );
};

export default JsonViewer;