react-pdf textlayer not working well with overlayed modal HTML elements

[viraj-lead]

I am using react-modal with react-pdf. The react modal overlays correctly on top of a Document. The issue is when I try to interact with elements on the modal, it interacts with the underlying text layer even though the modal HTML elements are overlayed on top of the underlying react-pdf layers.
See the selected text in the underlying text layer. I need to render the text layer as the user would select text from the PDF and use one of our APIs.

[wojtekmaj]

It appears to me like you may have shrunk the rendered canvas using CSS. This is not allowed. React-PDF must know the FINAL render size so it could align all the layers correctly.

[viraj-lead]

This is how I am rendering the document

 const pdfWrapperRef = useRef();
const textRenderer = useCallback(
        (textItem) => highlightPattern(textItem.str, highlights),
        [highlights]
    );

    useEffect(() => {
        const resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
                setWidth(entry.target.clientWidth * 0.96);
            }
        });

        resizeObserver.observe(pdfWrapperRef.current);

        return () => {
            resizeObserver.disconnect();
        };
    }, []);

	const onDocumentLoadSuccess = ({ numPages }) => {
		setNumPages(numPages);
	};

    const goToPrevPage = () =>
		setPageNumber(pageNumber - 1 <= 1 ? 1 : pageNumber - 1);

	const goToNextPage = () =>
		setPageNumber(
			pageNumber + 1 >= numPages ? numPages : pageNumber + 1,
	);

PDF view element

<Document
                        file={getPublicUrl(document.location)}
                        onLoadSuccess={onDocumentLoadSuccess}
                    >
                        <Page width={width || undefined} pageNumber={pageNumber} customTextRenderer={textRenderer} />
                    </Document>