importing PDF using gatsby with react pdf, returns error

Question

Trying to import PDF using react pdf in gatsby, but getting a no file found error

    import React, { useState } from 'react';
    import { Document, Page } from 'react-pdf';
    import mypdf from "../images/mypdf.pdf";
    
    export default function MyDocuments() {
        const [ numPages, setNumPages ] = useState(null);
        const [ pageNumber, setPageNumber ] = useState(1);
    
        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="container">
                <Document file={mypdf} onLoadSuccess={onDocumentLoadSuccess} className="container">
                    <Page pageNumber={pageNumber} />
                </Document>
                <div className="container">
                    <p>
                        Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
                    </p>
                    <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
                        Previous
                    </button>
                    <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
                        Next
                    </button>
                </div>
            </div>
        );
    }

ERROR:

Failed to load PDF file.

Page 1 of --

Already tried importing the asset and doing "../images/mypdf.pdf" and I know the file is there, anyone know how to fix to display the PDF correctly?