How to use the react-sketchapp.makeSymbol function in react-sketchapp

const pathSeparation = '/'

    // Add the theme name and theme ID at the start of the symbol name
    // e.g ProjectName/Dark/Color/Text/Primary
    let pathArray = [THEME_NAME, themeID, ...path]

    // UpperCase the first letter in each path string
    if (withCapitalize) pathArray = pathArray.map(e => e.replace(/\b\w/g, firstLetter => firstLetter.toUpperCase()))

    // Create the symbol name
    const pathString = pathArray.join().replace(/[,]/g, pathSeparation)

    // If the symbol equals the active theme, create a symbol and remove the theme specific path section
    if (themeID === ACTIVE_THEME) {
        makeSymbol(
            component,
            pathString
                .replace(
                    `${themeID.replace(/\b\w/g, firstLetter => firstLetter.toUpperCase())}${pathSeparation}`
                    , ''
                )
        )
    }

    return component
}

const RedSquare = () => (
  
);

const RedSquareSym = makeSymbol(RedSquare, 'squares/red');

const BlueSquare = () => (
  
);

const BlueSquareSym = makeSymbol(BlueSquare, 'squares/blue');

const Photo = () => (
  <img style="{{" name="Photo">
);

const PhotoSym = makeSymbol(Photo);

const Nested = () =&gt; (

name="Photo"
    source="https://pbs.twimg.com/profile_images/895665264464764930/7Mb3QtEB_400x400.jpg"
    style={{ width: 100, height: 100 }}
  />
);

const PhotoSym = makeSymbol(Photo);

const Nested = () => (
  
);

const NestedSym = makeSymbol(Nested);

export default () => {
  const Document = () => (
    
      
    
  );

  render(, context.document.currentPage());

);

const BlueSquareSym = makeSymbol(BlueSquare, 'squares/blue');

const Photo = () => (
  <img style="{{" name="Photo">
);

const PhotoSym = makeSymbol(Photo);

const Nested = () =&gt; (
  
);

const NestedSym = makeSymbol(Nested);

export default () =&gt; {
  const Document = () =&gt; (
    

import * as React from 'react';
import { render, Artboard, Text, View, Image, makeSymbol } from 'react-sketchapp';

const RedSquare = () => (
  
);

const RedSquareSym = makeSymbol(RedSquare, 'squares/red');

const BlueSquare = () => (
  
);

const BlueSquareSym = makeSymbol(BlueSquare, 'squares/blue');

const Photo = () => (
  <img style="{{" name="Photo">
);