HTML written with Quill and Highlight.js in Next.js is not rendered properly

Question

const QuillEditor = dynamic(
    async () => {
        hljs.configure({
            languages: ['javascript', 'typescript', 'html', 'python']
        })
        // @ts-ignore
        window.hljs = hljs
        const { default: QuillComponent } = await import('react-quill');
        QuillComponent.Quill.register('modules/imageResize', ImageResize);
        const _Quill = ({ forwardedRef, ...props }: ForwardedQuillComponent) => {
            const newModules = useMemo(() => {
                return {
                    ...props.modules, imageResize: {
                        parchment: Quill.import("parchment"),
                        modules: ["Resize", "DisplaySize"],
                    },
                    syntax: {
                        highlight: (text: string) => hljs.highlightAuto(text).value,
                    },
                }
            }, [props.modules])
            props.modules = newModules;
            return <QuillComponent ref={forwardedRef} {...props} />
        };
        return _Quill;
    },
    { loading: () => <div>...loading</div>, ssr: false },
);

The HTML created through the editor created with the code above is as follows.

<pre>const a = "title";
</pre>this is sample code...

When the HTML is saved in the DB and displayed again to the user, the code block CSS is not applied.

CSS is applied normally in the editor, but there is no response when rendering.