pdf only shows up after hard refresh of webpage

I’m trying to open a pdf in another tab. Upon clicking the link the first time, you are brought to an empty page, but after hard refreshing the page, the pdf displays correctly.

const Plot = ({name, pngUri, pdfUri, search, display, onHover}) => {
  return (
    <Card className={cx(plotSty, display ? null : hidden)} onMouseEnter={onHover}>
      <a href={pdfUri} target="_blank" rel='noopener noreferrer'>
        <CardHeader>{hlSearch(name, search)}</CardHeader>
        <CardImg src={pngUri} />
      </a>
    </Card>
  );
};

I did notice that when the new tab first loads, it tries run the main css and js files for the main webpages as well as just the pdf, and those show 404 errors (first image below). The “type” under inspect element > network shows html. While after a hard reload, only the pdf is run (second image below). The “type” here is pdf.
before hard reload

after hard reload

Anyone know what’s going on here?

I found this that might be related but I am not sure how I would apply to my situation Opening a link to download a pdf only works with hard reload and dev tools open