NoRendererComponent is not applying and causing flashing

[zqin97]

As title mentioned, my custom norenderer component wasn't applied and causing the viewer to flash and force to stay at the initialActiceDocument, even I press next or pervious it will went back to the initialActiveDocument.

import { IDocumentViewerProps } from "@/Global";
import { 
    Drawer, 
    DrawerBody, 
    DrawerCloseButton, 
    DrawerContent, 
    DrawerHeader, 
    DrawerOverlay,
    Text 
} from "@chakra-ui/react";
import DocViewer, { DocViewerRenderers, IDocument } from "@cyntler/react-doc-viewer";
import { ComponentType, FC } from "react";

interface NoRenderComponentProps {
    document?: IDocument; 
    fileName: string;
}

const NoRenderComponent: FC<NoRenderComponentProps> = ({ document, fileName }) => {
    return (
        <Text>No renderer available for file {fileName}.</Text>
    );
};

const DocumentViewerDrawer = (props: IDocumentViewerProps) => {
    const {
        isOpen,
        onClose,
        docId,
        documents
    } = props;

    return (
        <Drawer
            isOpen={isOpen}
            onClose={onClose}
            size={'full'}
        >
            <DrawerOverlay />
            <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader></DrawerHeader>

            <DrawerBody p={'16px 24px'}>
                {documents && docId &&
                    <DocViewer
                        documents={documents}
                        initialActiveDocument={documents[docId]}
                        pluginRenderers={DocViewerRenderers}
                        config={{
                            noRenderer: {
                                overrideComponent: NoRenderComponent,
                            }
                        }}
                    />
                }
            </DrawerBody>
            </DrawerContent>
        </Drawer>
    )
}

export default DocumentViewerDrawer;