I have a component where this component uses ckeditor, because I just tried ckeditor. I followed from the document but this component cannot resize the image custom and failed to compile in ckeditor, what do I need to do so that this component can resize the image custom? By the way I used next js

Here are the components:

import { config } from '@/configs';
import { postData, postFile } from '@/utils/fetch';
import { Editor } from '@ckeditor/ckeditor5-core';
import { regexDescription } from '@/utils/regex-message';
import { FileLoader, UploadAdapter } from '@ckeditor/ckeditor5-upload/src/filerepository';
import { useEffect, useRef, useState } from 'react';
// import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize'
import {Image, ImageResizeButtons, ImageResizeEditing, ImageResizeHandles} from '@ckeditor/ckeditor5-image'
import '@ckeditor/ckeditor5-build-classic/build/ckeditor'
// import Heading from '@ckeditor/ckeditor5-heading/src/heading';

const CKEditorComp = ({ name, formDesc, setFormDesc, register, error }: any) => {
    const [editorLoaded, setEditorLoaded] = useState(false);
    const [errorMsg, setErrorMsg] = useState('')
    const [isValid, setIsValid] = useState<boolean>(false)

    useEffect(() => {
        setEditorLoaded(true);
    }, []);
    const editorRef: any = useRef();
    const { CKEditor, ClassicEditor } = editorRef.current || {};

    function uploadAdapter(loader: FileLoader): UploadAdapter {
        return {
            upload: () => {
                return new Promise(async (resolve, reject) => {
                    try {
                        const file: any = await loader.file;
                        const { data } = await postFile(`?folder_path=images/blog&save_to=AWS&max_size=${config.MAX_FILE}`, { images: file });

                        resolve({
                            default: `${data.files[0].path}`,
                        });
                    } catch (error) {
                        // reject('Hello');
                        console.log(error)
                    }
                });
            },
            abort: () => {},
        };
    }
    function uploadPlugin(editor: Editor) {
        /* @ts-ignore */
        editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
            return uploadAdapter(loader);
        };
    }

    function resizeImage(editor: Editor){

    }

    useEffect(() => {
        editorRef.current = {
            CKEditor: require('@ckeditor/ckeditor5-react').CKEditor,
            ClassicEditor: require('@ckeditor/ckeditor5-build-classic'),
        };
    }, []);

    // ClassicEditor.builtinPlugins = [uploadPlugin, Heading];

    const handleChange = (value: any) => {
        const check = regexDescription.regex.test(value)
        if(check){
            setIsValid(true)
            return setErrorMsg('Jangan menggunakan tag html atau semacamnya')
        }else{
            setIsValid(false)
            setErrorMsg('')
        }
        
        setFormDesc(value)
    };

    return editorLoaded ? (
        <div>
            <CKEditor
                // register={register}
                // {...register}
                // error={error}
                config={{                    
                    extraPlugins: [uploadPlugin, ImageResizeButtons, ImageResizeEditing, ImageResizeHandles],
                    removePlugins: ['MediaEmbed'],
                    image: {
                        resizeOptions: [
                            {
                                name: 'resizeImage:original',
                                value: null,
                                label: 'Original'
                            },
                            {
                                name: 'resizeImage:custom',
                                value: 'custom',
                                label: 'custom'
                            },
                            {
                                name: 'resizeImage:50',
                                value: '50',
                                label: '50%'
                            },
                            {
                                name: 'resizeImage:75',
                                value: '75',
                                label: '75%'
                            }
                        ],
                        toolbar: [
                            'imageStyle:full',
                            'imageStyle:side',
                            'imageTextAlternative',
                            '|',
                            'resizeImage'
                        ]
                    }
                }}
                editor={ClassicEditor}
                data={formDesc}
                onChange={(event: any, editor: any) => handleChange(editor.getData())}
            />
            {isValid && errorMsg && (<p className="text-sm text-red-500">{errorMsg}</p>)}
        </div>
    ) : null;
    
};

export default CKEditorComp;

and this is the result when using the code above:
failed to compile