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

import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from 'styled-components';
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/dist/light';
import js from 'highlight.js/lib/languages/javascript';
import cpp from 'highlight.js/lib/languages/cpp';
import arduino from 'highlight.js/lib/languages/arduino';
import gist from 'react-syntax-highlighter/styles/hljs/github-gist';

registerLanguage('javascript', js);
registerLanguage('cpp', cpp); // Remind: for arduino
registerLanguage('arduino', arduino);

const Code = withTheme(({ style, theme, ...otherProps }) => (
  
));

import React from 'react';
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/dist/light';
import js from 'highlight.js/lib/languages/javascript';
import { docco } from 'react-syntax-highlighter/dist/styles/hljs';
import Description from './Description';

registerLanguage('javascript', js);

const containerStyle = {
  padding: '0 12px',
};

export const Story = ({ data }) => {
  const { name, storyName, description, source, options } = data;
  return (
    <div style="{containerStyle}">
      <p>
        <b>{name}</b> {storyName}
      </p>
      {description}
      <h2>Code</h2>
      
        {source}</div>

import React from 'react';
import SyntaxHighlighter, {registerLanguage} from 'react-syntax-highlighter/dist/light';
import sunburst from 'react-syntax-highlighter/src/styles/sunburst';
import js from 'react-syntax-highlighter/dist/languages/javascript';

import classes from './help.scss';
import {getRegistryURL} from '../../utils/url';

registerLanguage('javascript', js);

const Help = () => {
  const registryURL = getRegistryURL();

    return (
      <div>
        <li>
          <h1>
            No Package Published Yet
          </h1>
          <div>
            <div>
              To publish your first package just:
            </div>
            <br>
            <strong></strong></div></li></div>

import solarized from 'react-syntax-highlighter/dist/styles/solarized-light';
import css from 'highlight.js/lib/languages/css';
import Helmet from 'react-helmet';

import Header from '../components/Header';
import Hamburger from '../components/Hamburger';
import codeString from '../code-examples/hamburger';
import cssString from '../code-examples/hamburger-css';

import qr from '../images/hamburger-qr.png';

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/app.css';

registerLanguage('javascript', js);
registerLanguage('css', css);

class  HamburgerPage extends Component {
    render() {
        return (
            <div>
                
                <header>
                
                    
                        
                            
                                <h2>Hamburger Menu Example</h2>
                            
                        
                        
                            </header></div>

Jumbotron,
    Row
} from 'react-bootstrap';
import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/dist/light';
import solarized from 'react-syntax-highlighter/dist/styles/solarized-light';
import css from 'react-syntax-highlighter/dist/languages/css';
import Helmet from 'react-helmet';

import ClassName from '../components/ClassName';
import Header from '../components/Header';
import cssString from '../code-examples/class-name-css';

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/app.css';

registerLanguage('css', css);

class  CatalogPage extends Component {
    render() {
        return (
            <div>
                
                <header>
                
                    
                        
                            
                                <h2>Class Name - API Example</h2>
                            
                        
                        
                            </header></div>

import React, {Component} from 'react';

import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/dist/light";
import twig from "react-syntax-highlighter/dist/languages/twig";
import xml from "react-syntax-highlighter/dist/languages/xml";
import codeStyle from 'react-syntax-highlighter/dist/styles/foundation';

registerLanguage('twig', twig);
registerLanguage('html', xml);

class CodeFrame extends Component {
    constructor(props) {
        super(props)
        this.state = {code: ''}
    }
    componentDidMount() {
        this.fetch();
    }
    componentDidUpdate(prevProps) {
        if(prevProps.src !== this.props.src) {
            this.fetch();
        }
    }
    fetch() {
        this.setState({loading: true, err: false});

import { default as SH, registerLanguage } from "react-syntax-highlighter/dist/light";
import js from "highlight.js/lib/languages/javascript";
import ts from "highlight.js/lib/languages/typescript";
import bash from "highlight.js/lib/languages/bash";
import { assemble, defaultProps } from "reassemble";
import style from "react-syntax-highlighter/dist/styles/docco";

registerLanguage("javascript", js);
registerLanguage("typescript", ts);
registerLanguage("bash", bash);

const customStyle = {
  padding: "16px",
  fontSize: "13px",
};

const codeTagProps = {
  style: {
    fontFamily: "Roboto Mono",
    overflowWrap: "break-word",
    whiteSpace: "pre-wrap",
    wordWrap: "break-word",
  },
};

import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/dist/light';
import solarized from 'react-syntax-highlighter/dist/styles/solarized-light';
import js from 'highlight.js/lib/languages/javascript';
import css from 'highlight.js/lib/languages/css';
import Helmet from 'react-helmet';

import Catalog from '../components/Catalog';
import Header from '../components/Header';
import codeString from '../code-examples/catalog';
import cssString from '../code-examples/catalog-css';

import 'bootstrap/dist/css/bootstrap.css';
import '../styles/app.css';

registerLanguage('javascript', js);
registerLanguage('css', css);

class  CatalogPage extends Component {
    render() {
        return (
            <div>
                
                <header>
                
                    
                        
                            
                                <h2>Category Menu Example</h2>
                            
                        
                        
                            </header></div>