Avoiding re renders on scale change

[Swejal08]

Whenever I try to zoom in/out by changing the scale , the page re renders.
I am trying to avoid this for smooth zoom in/out functionality
Also , I am using React state to alter the scale.
Is there any solution out there to avoid this?

   <Document
          ref={documentRef}
          loading={PDFLoader}
          file={file}
          onLoadSuccess={(page) => {
            setIsDocumentLoaded(true);
            onDocumentLoadSuccess(page);
          }}
          onLoadError={(e) => {
            handleError(e);
          }}
          error={PDF_ERROR}
        >
          {Array.from(new Array(pages), (_index, pageNumber) => (
            <div
              key={`page-container_${pageNumber + 1}`}
              ref={(el) => {
                if (el !== null) {
                  pageRefs.current.set(pageNumber + 1, el);
                }
              }}
            >
              <Page
                key={`page_${pageNumber + 1}`}
                pageNumber={pageNumber + 1}
                scale={scale}
                loading={PDFLoader}
                width={480}
              ></Page>
            </div>
          ))}
        </Document>

Any help is appreciated. Thank you !!