How to use the react-syntax-highlighter/dist/cjs/prism-light.registerLanguage function in react-syntax-highlighter

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return 
}

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return 
}

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return 
}

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return 
}

import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light'
import prism from 'react-syntax-highlighter/dist/cjs/styles/prism/prism'

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import php from 'react-syntax-highlighter/dist/cjs/languages/prism/php'
import markupTemplating from 'react-syntax-highlighter/dist/cjs/languages/prism/markup-templating'
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('css', css)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('php', php)
SyntaxHighlighter.registerLanguage('markup-templating', markupTemplating) // for php
SyntaxHighlighter.registerLanguage('json', json)

export default function CodeBlock({ language, value, ...props }) {
  return {value}
}

export function JavaScript({ children, ...props }) {
  return 
}

export function Css({ children, ...props }) {
  return 
}

.then(definition => {
          SyntaxHighlighter.registerLanguage(language, definition.default)
          setCurrent(language)
        })
        .catch(() => {

import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light';
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
import classNames from 'classnames/bind';
import styles from './ExampleTemplate.module.scss';
import theme from './syntax-highlighter-theme';

SyntaxHighlighter.registerLanguage('jsx', jsx);

const cx = classNames.bind(styles);

const propTypes = {
  /**
   * The example component.
   */
  example: PropTypes.element,
  /**
   * The example source code.
   */
  exampleSrc: PropTypes.string,
  /**
   * The example title.
   */
  title: PropTypes.string,