`Cannot preview the pdf file selected in the modal.

  const onFileSelect = async (
    e: React.ChangeEvent<HTMLInputElement>,
    index: number,
    school_doc_setting_id: number,
  ) => {
    let uploadedSize = 0
    // setUploadingIndex(index)
    setSchoolDocSettingId(school_doc_setting_id)
    setIsDisabled(true)

    const files = e.target.files
    if (!files || files.length === 0) {
      console.error('No files selected')
      setIsDisabled(false)
      return
    }
    console.log('files', files)

    uploadedSize = files[0].size

    if (uploadedSize > sizeLimit * 1024 * 1024) {
      alert(errorFileSizeLimitReached)
      setIsDisabled(false)
      e.target.value = ''
      return
    }

    const selectedFileUrl = URL.createObjectURL(files[0])
    console.log('Selected file URL:', selectedFileUrl)
    setSelectedFiles(prevSelectedFiles => ({
      ...prevSelectedFiles,
      [index]: selectedFileUrl,
    }))

    // Open the modal for the selected index
    setOpen({ ...open, [index]: true })
  }

  useEffect(() => {
    const updatedOpenState = { ...open }
    Object.keys(updatedOpenState).forEach(index => {
      if (!updatedOpenState[index]) {
        setSelectedFiles(prevSelectedFiles => {
          const numIndex = Number(index)
          const { [numIndex]: _, ...rest } = prevSelectedFiles
          return rest
        })

        // Reset the input value when the modal is closed
        const inputElement = fileInput.current[Number(index)]
        if (inputElement) {
          inputElement.value = ''
        }
      }
    })
  }, [open])

========================================================

const ImageContent = ({
    file_url,
    name,
    index,
    isPassport,
    selectedFile,
    onSave,
    isUploaded,
  }: {
    file_url: string
    name: string
    index: number
    isPassport?: boolean
    selectedFile?: string
    onSave: (index: number) => void
    isUploaded?: boolean
  }) => {
    const displayUrl = isPassport ? (selectedFile || '/images/passport.png') : (selectedFile || file_url);
    const isImage = isImageUrl(displayUrl);
    const isFileSelected = selectedFile !== undefined;

    return (
      <div className='relative flex flex-col items-center justify-center gap-[25px]'>
        <div className='max-h-[450px] max-w-[450px] overflow-hidden'>
          {isImage ? (
            <Image
              src={displayUrl}
              width={450}
              height={450}
              quality={100}
              alt={name}
              className='h-[300px] w-full object-contain'
            />
          ) : (
            <iframe
              src={displayUrl}
              className='h-[300px] w-full object-contain'
              width={450}
              height={450}
            />
          )}
          <Label className='flex items-center justify-center p-2 font-[18px]'>
            {name}
          </Label>
        </div>
        {isFileSelected || isUploaded ? (
          <label
            className={`mx-auto mb-2 flex w-full cursor-pointer items-center justify-center rounded-[5px] border-2 border-[#c6c6c6] py-2 text-[14px] ${index === uploadingIndex && isDisabled ? 'px-12' : 'px-16'}`}
            onClick={() => {
              if (isUploaded) {
                setOpen({ ...open, [index]: false });
              } else if (isFileSelected) {
                setUploadingIndex(index);
                setIsDisabled(true);
                onSave(index);
              }
            }}
          >
            <ReloadIcon
              className={`mr-2 mt-[4px] h-4 w-4 animate-spin ${index === uploadingIndex && isDisabled ? 'block' : 'hidden'}`}
            />
            提出する
          </label>
        ) : (
          <label
            htmlFor={'applicationDocs' + index}
            className={`mx-auto mb-2 flex w-full cursor-pointer items-center justify-center rounded-[5px] border-2 border-[#c6c6c6] py-2 text-[14px] ${index === uploadingIndex && isDisabled ? 'px-12' : 'px-16'}`}
          >
            ファイルを選択する
          </label>
        )}
      </div>
    );
  };

I have this image content method which handle of showing the file selected in my modal:

<div className='w-[320px] max-w-[320px] truncate text-center  font-yugothic text-[14px] leading-[24px] text-[#3d3d3d] sm:w-[220px] sm:max-w-[220px]'>
                      <Modal
                        key={index}
                        open={open[index] || false}
                        onOpenChange={() =>
                          setOpen({ ...open, [index]: !open[index] })
                        }
                        triggerClass='!bg-transparent'
                        trigger={null}
                        title=''
                        description=''
                        isWithActionButton={false}
                        contentClass='!w-full sm:max-w-[450px]'
                        form={
                          <ImageContent
                            file_url={DEFAULT_IMAGE}
                            name={item?.name}
                            index={index}
                            isPassport={
                              item?.name.toLowerCase().trim() === 'passport'
                            }
                            selectedFile={selectedFiles[index]}
                            onSave={onSaveFile}
                          />
                        }
                      />
                      <span
                        onClick={() => setOpen({ ...open, [index]: true })}
                        className='mx-auto flex cursor-pointer items-center justify-center rounded-[5px] border-2 border-[#c6c6c6] py-2 text-[14px]'
                      >
                        アップロードする
                      </span>
                    </div>

I understand that the iframe will catch the display of file selected since when I select a file which is pdf the url became blob:
Selected file URL: blob:http://localhost:3000/ce6b0353-2805-49bc-af00-c022071f2f7a
but why its cannot be displayed in the mobile screen? but in desktop it works find?

I appreciate if someone can suggest a solution for this problem I have. `