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

import CMS from 'netlify-cms';
import NetlifyCMSWidgetColor from 'netlify-cms-widget-color';
import NetlifyCMSWidgetFontawesome from 'netlify-cms-widget-fontawesome';
import NetlifyCMSWidgetMaterialIcons from 'netlify-cms-widget-material-icons';
import NetlifyCMSWidgetNativeColor from 'netlify-cms-widget-native-color';

CMS.registerWidget('color', NetlifyCMSWidgetColor.Control);

CMS.registerWidget(
  'fontawesome-solid',
  NetlifyCMSWidgetFontawesome.Solid,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-regular',
  NetlifyCMSWidgetFontawesome.Regular,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');

NetlifyCMSWidgetFontawesome.Solid,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-regular',
  NetlifyCMSWidgetFontawesome.Regular,
  NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');
CMS.registerWidget(
  'material-icons',
  NetlifyCMSWidgetMaterialIcons.Control,
  NetlifyCMSWidgetMaterialIcons.Preview,
);

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor.Control);

NetlifyCMSWidgetFontawesome.Preview,
);
CMS.registerWidget(
  'fontawesome-brands',
  NetlifyCMSWidgetFontawesome.Brands,
  NetlifyCMSWidgetFontawesome.Preview,
);

// CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons');
CMS.registerWidget(
  'material-icons',
  NetlifyCMSWidgetMaterialIcons.Control,
  NetlifyCMSWidgetMaterialIcons.Preview,
);

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor.Control);

fields: [
						{
							name: "youtube_widget",
							label: "Youtube",
							widget: "youtube",
							extraInfo: true,
							APIkey: "AIzaSyB1-hj06noPkeA7RHv07Hex3E53M87RMJE"
						}
					]
				}
			]
		}
	]
};

CMS.registerWidget("youtube", youtubeControl, youtubePreview);

init({ config });

media_folder: 'assets',
  collections: [{
    name: 'test',
    label: 'Test',
    files: [{
      file: 'test.yml',
      name: 'test',
      label: 'Test',
      fields: [
        { name: 'test_widget', label: 'Test Widget', widget: 'test'},
      ],
    }],
  }],
}

CMS.registerWidget('test', Control, Preview)

init({ config })

import CMS, { init } from 'netlify-cms'
import NetlifyCMSWidgetColor from 'netlify-cms-widget-color'
import NetlifyCMSWidgetNativeColor from 'netlify-cms-widget-native-color'
import * as NetlifyCMSWidgetMaterialIcons from 'netlify-cms-widget-material-icons'
import * as NetlifyCMSWidgetFontawesome from 'netlify-cms-widget-fontawesome'

CMS.registerWidget('color', NetlifyCMSWidgetColor)

CMS.registerWidget('native-color', NetlifyCMSWidgetNativeColor)

CMS.registerWidget('material-icons', NetlifyCMSWidgetMaterialIcons.Control, NetlifyCMSWidgetMaterialIcons.Preview)
CMS.registerPreviewStyle('https://fonts.googleapis.com/css?family=Material+Icons')

CMS.registerWidget('fontawesome-solid', NetlifyCMSWidgetFontawesome.Solid, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-regular', NetlifyCMSWidgetFontawesome.Regular, NetlifyCMSWidgetFontawesome.Preview)
CMS.registerWidget('fontawesome-brands', NetlifyCMSWidgetFontawesome.Brands, NetlifyCMSWidgetFontawesome.Preview)

init({ config })

},
  media_folder: 'assets',
  collections: [
    {
      name: 'post',
      label: 'Posts',
      label_singular: 'Post',
      folder: '_posts',
      extension: 'mdx',
      format: 'frontmatter',
      fields: [{ name: 'title', label: 'Title' }, { name: 'body', label: 'Body', widget: 'mdx' }],
    },
  ],
};

CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    components: {
      h1: ({ children, ...props }) => (
        <h1 style="{{">
          {children}
        </h1>
      ),
    },
    scope: {
      Layout: props =&gt; (
        <div style="{{"></div>

...config,
		collections: [
			settingsCollection,
			authorsCollection,
			categoriesCollection,
			postsCollection,
		],
	},
});

//	load stylesheets
CMS.registerPreviewStyle(typography.toString(), {raw: true});
CMS.registerPreviewStyle(appStyles.toString(), {raw: true});

//	register widgets
CMS.registerWidget('color', ColorWidget.Control);

//	register editor components
CMS.registerEditorComponent(Code);
CMS.registerEditorComponent(Audio);
CMS.registerEditorComponent(Video);
CMS.registerEditorComponent(Image);
CMS.registerEditorComponent(Reveal);
CMS.registerEditorComponent(Calout);
CMS.registerEditorComponent(Divider);
CMS.registerEditorComponent(Gallery);
CMS.registerEditorComponent(Reference);
CMS.registerEditorComponent(Countdown);
CMS.registerEditorComponent(SectionHeading);

//	register previews
CMS.registerPreviewTemplate('posts', PostsPreview);

import CMS from "netlify-cms";

import { SlidesControl, SlidesPreview } from "./Slides";

CMS.registerWidget("slides", SlidesControl, SlidesPreview);

export function register() {
  CMS.registerWidget('uploadcare', Control, Preview)
}