Конфигурация бабеля PrismJS не работает в React

У меня установлен babel-plugin-prismjs, созданный .babelrc с этим кодом:

{
    "plugins": [
        ["prismjs", {
            "languages": ["javascript", "css", "html"],
            "plugins": ["line-numbers", "show-language", "copy-to-clipboard", "toolbar", "inline-color"],
            "theme": "prism-tomorrow",
            "css": true
            }
        ]
    ]
}

и импортировал Prism в App.js.

Это код в App.js:

import React, { useEffect } from "react";
import Prism from "prismjs";

const code = `
const foo = 'foo';
const bar = 'bar';
console.log(foo + bar);
`.trim()

function App() {
  useEffect(() =>{
    Prism.highlightAll();
  }, [])

  return (
    <pre className="line-numbers">
      <code className="language-js">
        {code}
      </code>
    </pre>
  );
}

export default App;

Но веб-страница не выделяет синтаксис. Что мне здесь не хватает?