我已经使用react-dropzone -https://www.npmjs.com/package/react-dropzone实现了一个文件拖放组件，如下所示，但我面临的问题基本上是在ubuntu谷歌浏览器中，在单击react-dropzone时，我无法预览.mov文件。

import Loader from "./Loader";
import PropTypes from "prop-types";
import notification from "@/utils/notification";
import styles from "@/components/Icon/PopupBox.module.css";
import { Box } from "@mui/material";
import { memo, useCallback } from "react";
import { Controller } from "react-hook-form";
import { useDropzone } from "react-dropzone";
import { checkFileExtensionIsInArray } from "@/utils/helper";
import { FormControl, FormHelperText, Typography } from "@mui/material";

const DropzoneUpload = (props) => {
  const {
    control,
    rules,
    name,
    accept,
    maxFiles,
    minSize,
    maxSize,
    noDrag,
    noClick,
    disabled,
    children,
    label,
    errors,
    allowedFileType,
    multiple,
    handleChange,
    loadingField,
    progress,
  } = {
    ...props,
  };

  const checkFileAndValidate = useCallback(
    (file) => {
      const fileName = file?.name?.toLowerCase();
      if (file.type?.includes("image") && file?.size > 52428800) {
        return notification.error("Image size should be upto 50MB");
      }
      if (!checkFileExtensionIsInArray(fileName, allowedFileType)) {
        return notification.error(`Only ${allowedFileType?.join(", ")} is allowed`);
      }
      if (maxSize && file?.size > maxSize) {
        return notification.error("Maximum file size limit exceeds");
      }
    },
    [allowedFileType, maxSize]
  );

  const onDrop = useCallback(
    (acceptedFiles) => {
      if (checkFileExtensionIsInArray(acceptedFiles[0]?.path, allowedFileType)) {
        const finalFiles = [];
        acceptedFiles?.length > 0 &&
          acceptedFiles.forEach((file) => {
            if (file?.type?.includes("image") && file.size > 52428800) {
              // return notification.error("Image size should be upto 50MB");
            } else {
              finalFiles.push(file);
            }
          });
        handleChange(finalFiles);
      }
    },
    [handleChange]
  );
  const { getRootProps, getInputProps } = useDropzone({
    accept,
    maxFiles: multiple ? maxFiles : 0,
    minSize,
    maxSize,
    onDrop,
    noDrag,
    noClick,
    disabled,
    multiple,
    validator: checkFileAndValidate,
  });

  return (
    <FormControl variant="standard" sx={{ m: 0, minWidth: "100%" }}>
      <Typography>{label}</Typography>
      <Controller
        name={name}
        rules={rules}
        control={control}
        render={(controllerProps) => {
          return (
            <div>
              {loadingField === name ? (
                <Box className={styles.boxStyles}>
                  <Loader value={progress} colorStyle={styles.redColor} />
                </Box>
              ) : loadingField === true ? (
                <Loader />
              ) : (
                <div {...getRootProps()} {...controllerProps}>
                  <input {...getInputProps()} />
                  {children}
                </div>
              )}
            </div>
          );
        }}
      />
      <FormHelperText error={true}>{errors || null}</FormHelperText>
    </FormControl>
  );
};

DropzoneUpload.propTypes = {
  control: PropTypes.any,
  rules: PropTypes.any,
  name: PropTypes.string,
  accept: PropTypes.string,
  maxFiles: PropTypes.number,
  minSize: PropTypes.number,
  maxSize: PropTypes.number,
  noDrag: PropTypes.bool,
  noClick: PropTypes.bool,
  disabled: PropTypes.bool,
  children: PropTypes.any,
  label: PropTypes.string,
  errors: PropTypes.any,
  allowedFileType: PropTypes.any,
  multiple: PropTypes.bool,
  handleChange: PropTypes.func,
  loadingField: PropTypes.string,
  progress: PropTypes.number,
};

DropzoneUpload.defaultProps = {
  control: {},
  rules: {},
  name: "",
  maxFiles: 1,
  minSize: 0,
  maxSize: 2147483640,
  noDrag: false,
  noClick: false,
  disabled: false,
  children: null,
  label: null,
  errors: null,
  allowedFileType: null,
  multiple: false,
  handleChange: () => {},
  loadingField: null,
  accept: "image/jpeg,image/png,images/jpg",
  progress: 0,
};

export default memo(DropzoneUpload);

使用windows 11与谷歌chrome完美的工作，但我面临的唯一问题是与ubuntu - Ubuntu 22. 04. 1 LTS在谷歌chrome -版本105. 0. 5195. 125（官方构建）（64位）