For performance, I need to reduce the size of the images I send to my cloud storage (firebase). Through some research I came to know webp is the way to go but I'm using react dropzone and I have to idea how to work these 2 together.

DragAndDrop.js

function DragAndDrop() {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps } = useDropzone({
    accept: "image/*",
    maxFiles: 5,
    onDrop: (acceptedFiles) => {
      setFiles((files) => [
        ...files,
        ...acceptedFiles.map((file) =>
          Object.assign(file, {
            key: file.name + randomId(), // to allow adding files with same name
            preview: URL.createObjectURL(file),
          })
        ),
      ]);
    },
  });
 
  const thumbs = files.map((file, i) => (
    <div style={thumb} key={file.key}>
      <div style={thumbInner}>
        <img src={file.preview} style={img} alt="imported images" />
      </div>
      <button type="button" style={removeButton} onClick={() => removeFile(i)}>
        X
      </button>
    </div>
  ));

  useEffect(
    () => () => {
      files.forEach((file) => URL.revokeObjectURL(file.preview));
    },
    [files]
  );

}