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

import CMS, { init } from 'netlify-cms-app';
import FileSystemBackend from 'netlify-cms-backend-fs';
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

import BlogPostPreview from './preview-templates/blog-post-preview';

// If running in development
if (process.env.NODE_ENV === 'development') {
  window.CMS_ENV = 'development_overrides'; // Set the CMS_ENV to the development_ overrides.
  CMS.registerBackend('file-system', FileSystemBackend); // Register the FileSystemBackend.
}

CMS.registerWidget('mdx', MdxControl, MdxPreview);
CMS.registerPreviewTemplate('blog', BlogPostPreview);

// Start NetlifyCMS
init();

}

  return (
    
      
        
      
    
  )
}

// Netlify collections that set `widget: mdx` will be able to use this custom
// widget. NOTE: The StyleSheet manager can *only* be injected into the Preview.
// Docs: https://www.netlifycms.org/docs/widgets/

CMS.registerWidget("mdx", MDXWidget, PreviewWindow)

// Start the CMS
init()

React.useEffect(() => {
    console.log(`CMS [${process.env.NODE_ENV}]`, CMS, )
    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})
  })