How to use the @simonwep/pickr.create function in @simonwep/pickr

// Build dom
        this._root = buildGPickr(opt);

        // Check if conic-gradient is supported
        if (CSS.supports('background-image', 'conic-gradient(#fff, #fff)')) {
            this._modes.push('conic');
        }

        opt.el = opt.el.split(/>>/g).reduce((pv, cv, ci, a) => {
            pv = pv.querySelector(cv);
            return ci < a.length - 1 ? pv.shadowRoot : pv;
        }, document);

        opt.el.parentElement.replaceChild(this._root.root, opt.el);

        this._pickr = Pickr.create({
            el: this._root.pickr,
            theme: 'nano',
            inline: true,
            useAsButton: true,
            showAlways: true,
            defaultRepresentation: 'HEXA',

            components: {
                palette: true,
                preview: true,
                opacity: true,
                hue: true,

                interaction: {
                    input: true
                }

const createAndOpen = useCallback(() => {
        if (!ref.current) {
            return;
        }

        if (pickrRef.current) {
            return;
        }

        const pickr = Pickr.create({
            el: ref.current,
            theme: "nano",
            outputPrecision: 0,
            useAsButton: true,
            default: currentColorRef.current,
            components: {
                // Main components
                preview: true,
                hue: true,

                // Input / output Options
                interaction: {
                    input: true,
                },
            },
        });

mounted() {
			this.pickr = Pickr.create({
				el: '.' + this.mapping.handle + '-pickr',
				theme: 'monolith',
				default: this.mapping.default,
				comparison: true,
				components: {
                    opacity: this.settings.transparency,
                    hue: true,
                }
            }).on('save', (color, instance) => {
                this.pickrChanged(color)
            }).on('change', (color, instance) => {
                this.pickrChanged(color)
            }).on('clear', (instance) => {
                this.pickrChanged(null)
            })

mounted() {
            let defaultColor = this.value === null && this.field.settings.default ? this.field.settings.default : ''

            this.pickr = Pickr.create({
                el: '.' + this.pickrClass,
                theme: 'monolith',
                default: this.value && this.value != '' ? this.value : defaultColor,
                swatches: [
                    '#000000',
                    '#FFFFFF',
                    
                    '#F7FAFC',
                    '#EDF2F7',
                    '#E2E8F0',
                    '#CBD5E0',
                    '#A0AEC0',
                    '#718096',
                    '#4A5568',
                    '#2D3748',