Setting src using base64 data doesn't render the image

[anshul-kai]

The snippet below doesn't render a base64 image. Using the same snippet with file select works just fine. Am I doing something wrong here?

<Cropper
  ref={cropperRef}
  src={image?.src ?? base64Img}
  onUpdate={_onUpdate}
  stencilProps={{
    aspectRatio: 1
  }}
  className="cropper"
/>

const _onUpdate = useCallback((cropper: CropperRef) => {
  previewRef.current?.update(cropper);
}, [base64Img, previewRef]);

const _onFileSelect = useCallback((e: ChangeEvent) => {
  const { files } = e.target as HTMLInputElement;
  if (files && files.length) {
    const blob = URL.createObjectURL(files[0]);

    // Get the image type from the extension. It's the simplest way, though be careful it can lead to an incorrect result:
    setImage({
      src: blob,
      type: files[0].type,
      ext: files[0].name.split('.').pop()?.toLowerCase()
    });
  }

  // Clear the event target value to give the possibility to upload the same image:
  (e.target as HTMLInputElement).value = '';
}, []);