How to solve: PDF installed instead of opening with react-pdf?

Question

Hi, I'd like to display multiple pages of my PDF. I've followed the code sample on react-pdf. However, when I run the site on localhost, the PDF is installed rather than opened.

Please help

1. Error:

2. Folder structure:

3. What I've tried:

• Include the media queries
• Try all suggested file path (public, import, relative)

4. Here's my code:

import React from "react";
import { Page } from "react-pdf";
import { pdfjs } from "react-pdf";
import { Document } from "react-pdf/dist/esm/entry.webpack";

import Lesson_1 from "./Lesson 1.pdf";
// import {} from '../../../public/docs/pdf/Lesson 1.pdf'

// pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

const options = {
  cMapUrl: "cmaps/",
  cMapPacked: true,
};

function Lesson(props) {
  const [numPages, setNumPages] = React.useState(null);
  const [pageNumber, setPageNumber] = React.useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="Lesson 1.pdf"
        options={options}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}


export default Lesson;