How to use the netlify-cms-app.init function in netlify-cms-app

import CMS from "netlify-cms-app"

/**
 * Load Netlify CMS automatically if `window.CMS_MANUAL_INIT` is set.
 */
// eslint-disable-next-line no-undef
if (!CMS_MANUAL_INIT) {
  CMS.init()
} else {
  console.log(
    `\`CMS_MANUAL_INIT\` flag set, skipping automatic initialization.'`
  )
}

// eslint-disable-next-line no-undef
if (PRODUCTION) {
  /**
   * The stylesheet output from the modules at `modulePath` will be at `cms.css`.
   */
  CMS.registerPreviewStyle(`cms.css`)
} else {
  /**
   * In development styles are injected dynamically via the style-loader plugin
   */

React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // const FileSystemBackend = import('netlify-cms-backend-fs');
      // console.log('FileSystemBackend', FileSystemBackend)
      config.backend = {
        "name": "file-system",
        "api_root": "http://localhost:3000/api"
      }
      CMS.registerBackend('file-system', FileSystemBackend);
    }
    CMS.registerPreviewTemplate('authors', AuthorsPreview);
    CMS.registerEditorComponent(EditorYoutube);
    
    CMS.init({ config });
  })

if (process.env.NODE_ENV === 'development') {
  // config.load_config_file = false
  config.backend = {
    "name": "file-system",
    "api_root": "/api"
  }
  config.display_url = "http://localhost:8000"
  CMS.registerBackend('file-system', FileSystemBackend)
} else {
  config.backend = {
    "name": "github",
    "repo": "ADARTA/gatsby-starter-netlify-cms",
    "branch": "master"
  }
}
CMS.init({config})

CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)

import CMS from 'netlify-cms-app'
import '../assets/stylesheets/styles.scss'

import AboutPagePreview from './preview-templates/AboutPagePreview'
import ArticlePreview from './preview-templates/ArticlePreview'
import ContactPagePreview from './preview-templates/ContactPagePreview'

CMS.init()
CMS.registerPreviewTemplate('blog', ArticlePreview)
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('contact', ContactPagePreview)

if (process.env.NODE_ENV === 'development') {
      config.load_config_file = false
      config.backend = {
        "name": "file-system",
        "api_root": "http://localhost:3000/api"
      }
      CMS.registerBackend('file-system', FileSystemBackend);
    }
    CMS.registerPreviewTemplate("posts", PostPreview);
    CMS.registerPreviewStyle(previewStyles, { raw: true });
    CMS.registerPreviewTemplate("authors", AuthorsPreview);
    CMS.registerPreviewTemplate("general", GeneralPreview);
    CMS.registerEditorComponent(EditorYoutube);
    CMS.registerWidget("relationKitchenSinkPost", "relation", RelationKitchenSinkPostPreview);

    CMS.init({config})
  })

import CMS from 'netlify-cms-app';

CMS.init();

import CMS from 'netlify-cms-app'
import '../assets/sass/styles.sass'
import HomePagePreview from './preview-templates/HomePagePreview'
import AboutPagePreview from './preview-templates/AboutPagePreview'
import ArticlePreview from './preview-templates/ArticlePreview'
import PricingPagePreview from './preview-templates/PricingPagePreview'
import ContactPagePreview from './preview-templates/ContactPagePreview'

CMS.init()
CMS.registerPreviewStyle('/styles.css')
CMS.registerPreviewTemplate('home', HomePagePreview)
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('pricing', PricingPagePreview)
CMS.registerPreviewTemplate('contact', ContactPagePreview)
CMS.registerPreviewTemplate('blog', ArticlePreview)