Previewing PDF inside MUI tooltip

I am trying to display a preview of a PDF inside an MUI Tooltip whenever someone hovers over an MUI ListItem. I am able to display PNGs and JPGs as previews inside the tooltip using Next.js’ Image component, but when I tried using @react-pdf/renderer to show PDFs, I am only able to display the viewing area of the PDF, but not the PDF itself. My best guess is one of the following: 1) Could it be the URL is not being recognized properly 2) could it be that the PDF is not being saved properly when it’s initially uploaded, so there’s nothing to display from the URL, 3) It’s trying to show the PDF too quickly, so it’s not loaded in properly from where it’s saved? Below is a minimum reproducible example:

const Dropzone = (props) => {
  const { files, setFiles } = props

  const onDrop = useCallback(acceptedFiles => {
    if (acceptedFiles?.length) {
      setFiles(prev => ([
        ...prev,
        ...acceptedFiles.map(file => (
          Object.assign(file, { preview: URL.createObjectURL(file) })
        ))
      ]))
    }
  }, [])

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
      <List>
        {files.map((file, index) => (
            <Tooltip
              TransitionComponent={Zoom}
              title={
                <PDFViewer>
                   <Document
                     file={file.preview}
                   >
                      <Page pageNumber={1}/>
                  </PDFViewr>
              }
            >
              <ListItem key={file.name}>
                <ListItemAvatar>
                  <DescriptionIcon />
                </ListItemAvatar>
                <ListItemText
                  primary={file.name}
                  secondary={file.size}
                />
              </ListItem>
            </Tooltip>
        ))}
      </List>

  )
}

export default Dropzone