React + Prism.js highlights automatically after import

When I import Prism.js in a React app, Prism.js automatically and immediately hightlights all code blocks.

I want to highlight the code blocks manually.

This is my React app codes:

import React from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

const code = `const App = props => {
  return (
    <div>
      <h1> React App </h1>
      <div>Awesome code</div>
    </div>
  );
};
`;

export default function App() {
  return (
    <pre>
      <code className="language-javascript">{code}</code>
    </pre>
  );
}

See the live example at Codesandbox

How can I highlight the code block manually?

Note: I've also asked this question on Stackoverflow, but got no answers.

Start with the linked CodeSandbox, especially src/App.js, and reproduce the reported behavior after importing Prism.js. Determine whether the import causes the

 block to be highlighted automatically and identify the documented way to request highlighting manually. Done means the example remains unhighlighted until highlighting is explicitly requested.