react-pdf generated image is not becoming responsive on small screens

I am using react-responsive-modal and react-pdf(to generate images).

On bigger screen above 600px the generated image is responsive inside the modal.

But as the screen size is less than 600px the generated image is not responsive and its hidden some part.

The working code is below:

import React, { useState } from 'react'; 
import { Document, Page,pdfjs } from 'react-pdf'; 
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

const url = 
"https://cors-anywhere.herokuapp.com/http://www.pdf995.com/samples/pdf.pdf"

export default function App() { 
    
const [open, setOpen] = useState(false);

const onOpenModal = () => setOpen(true);
const onCloseModal = () => setOpen(false);
 
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; 
const [numPages, setNumPages] = useState(null); 
const [pageNumber, setPageNumber] = useState(1); 

/*To Prevent right click on screen*/
document.addEventListener("contextmenu", (event) => { 
    event.preventDefault(); 
}); 
    
/*When document gets loaded successfully*/
function onDocumentLoadSuccess({ numPages }) { 
    setNumPages(numPages); 
    setPageNumber(1); 
} 

function changePage(offset) { 
    setPageNumber(prevPageNumber => prevPageNumber + offset); 
} 

function previousPage() { 
    changePage(-1); 
} 

function nextPage() { 
    changePage(1); 
} 

return ( 
    <> 
    <div className="main"> 
        <button onClick={onOpenModal}>Open modal</button>
            <Modal open={open} onClose={onCloseModal} center>
                <Document 
                    file={url} 
                    onLoadSuccess={onDocumentLoadSuccess} 
                > 
                    <Page pageNumber={pageNumber} /> 
                </Document> 
            <div> 
                <div className="pagec"> 
                        Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} 
                </div> 
                <div className="buttonc"> 
                    <button 
                        type="button"
                        disabled={pageNumber <= 1} 
                        onClick={previousPage} 
                        className="Pre">Previous
                    </button> 
                    <button 
                        type="button"
                        disabled={pageNumber >= numPages} 
                        onClick={nextPage}>Next
                    </button> 
                </div> 
            </div> 
            </Modal>
    </div> 
    </> 
); 
}

I want the generated image to scale down accordingly on mobile screen too. How can I acheve that. I already tried putting "max-width:100%" on image and others also but it did not work out. I am lost.

Please suggest how can I fix that.