How to resize a photo while preserving its metadata in ReactJS?

Question

I'm building a ReactJS application where users can upload photos. I want to be able to resize the photos to reduce their file size, but I also want to preserve the original metadata (such as EXIF data) that is attached to the photo.

I've looked into various libraries such as react-image-file-resizer and react-image-resizer, but I'm not sure how to preserve the metadata while resizing the photo. Can anyone point me in the right direction or provide an example of how to achieve this in ReactJS?

const uploadPicture = async (file: any) => {
    const jwt = getStorageItem(WebStorageKeys.Jwt)
    const acceptLanguage = getStorageItem(WebStorageKeys.Lang) || Locales.Ms

    const imgBody = new FormData()

    const imageSpec = {
      maxWidth: 2048,
      maxHeight: 2048,
      compressFormat: 'JPEG',
      quality: 80,
      rotation: 0
    }

    const resizeFile = (file: File) =>
      new Promise((resolve) => {
        Resizer.imageFileResizer(
          file,
          imageSpec.maxWidth,
          imageSpec.maxHeight,
          imageSpec.compressFormat,
          imageSpec.quality,
          imageSpec.rotation,
          (uri) => {
            resolve(uri)
          },
          'file'
        )
      })

    const resizedFile: any = await resizeFile(file)

    imgBody.append('photo', resizedFile, resizedFile.name)
    imgBody.append('submissionId', submission?._id || '')

    const res = await fetch(`${config.gateway.baseUrl}/api/submissions/upload-image`, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${jwt}`,
        'accept-language': acceptLanguage
      },
      body: imgBody
    })

    const data = await res.json()

    return { url: data.url }
  }

What I expected to happen is for the resized image to have the same metadata as the original image, so that I can still access information such as the date, time, and location the photo was taken.

What actually resulted is that the resized image had no metadata, and all the information was lost.

Can anyone point me in the right direction or provide an example of how to achieve this in ReactJS?