When I store a File object using Jotai's atomWithStorage, why does the object change after I dispatch my react hook form

Question

The logs (picture 1) within the red square happen when a photo is opened to be displayed in react-avatar-editor to be editted.(picture 2-3) all the logs below the red square happen when i click the save button on my form.(picture 4) (not the confirm button on the photo editor).

I want to persist the File data within the storageAtom(local storage), but the data changes once the form is saved.

picture 1

Console:

picture 2

Once "Open" is clicked, the logs in within the red square appear.

picture 3

No logs from the above photo appear when the "Confirm" button is clicked.

picture 4

the logs below the red square in the console, are shown once the "Save Changes" button is clicked

Storage

const headerOgImageAtom = atomWithStorage<File>('headerOgImage', {} as File);

  const [file, fileSet] = useState<File | ''>('');
  const setHeaderStorage = useSetAtom(headerOgImageAtom)
  const getHeaderStorage = useAtomValue(headerOgImageAtom)

  const onDrop = (acceptedFiles: File[]) => {
    onOpen()
    const acceptedFile = acceptedFiles[0];
    fileSet(acceptedFile);
    setHeaderStorage(acceptedFile)
  };

  const onConfirmed = () => {
    if (editor.current) {
      const canvasScaled = editor.current.getImageScaledToCanvas();
      canvasScaled.toBlob((blob) => {
        if (blob) {
          const newFile = new File([blob], 'headerUri.png', {
            type: 'image/png',
            lastModified: Date.now()
          });
          field.onChange(newFile);
          onSuccess && onSuccess({ file: newFile, metaData, name });
          onClose();
        }
      });
    }
  };

  useEffect(() => {
    console.log('original file', file)
    console.log('storageAtom file', getHeaderStorage)
  }, [file, getHeaderStorage]);

Dispatch

const ProjectDetailsPreview = dynamic(() => import('./preview'), { ssr: false });

const useGetInitialSetDefaultValues = () => {
  const {
    name,
    infoUri,
    logoUri,
    headerUri,
    description,
    twitter,
    discord,
    payButton,
    payDisclosure,
    handle
  } = useAppSelector((state) => state.editingV2Project).projectMetadata;

  const defaultValues: fieldsProps = useMemo(() => {
    const defaultValues = {
      name: name ?? '',
      infoUri: infoUri ?? '',
      logoUri: logoUri ?? '',
      headerUri: headerUri ?? '',
      description: description ?? '',
      twitter: twitter ?? '',
      discord: discord ?? '',
      payButton: payButton ?? '',
      payDisclosure: payDisclosure ?? '',
      handle: handle ?? ''
    };

    return defaultValues;
  }, [
    name,
    infoUri,
    logoUri,
    headerUri,
    description,
    twitter,
    discord,
    payButton,
    payDisclosure,
    handle
  ]);

  const initialValues: fieldsProps = {
    name: '',
    infoUri: '',
    logoUri: '',
    headerUri: '',
    description: '',
    twitter: '',
    discord: '',
    payButton: '',
    payDisclosure: '',
    handle: ''
  };

  return { defaultValues, initialValues };
};

const useDispatchForm = (
  reset: UseFormReset<fieldsProps>,
  onFinish?: () => void,
  setTab?: () => void
) => {
  const dispatch = useAppDispatch();

  const onProjectDetailsFormSaved = (data: fieldsProps) => {
    const {
      name,
      infoUri,
      logoUri,
      headerUri,
      description,
      twitter,
      discord,
      payButton,
      payDisclosure,
      handle
    } = data;
    dispatch(editingProjectActions.setName(name));
    dispatch(editingProjectActions.setInfoUri(infoUri));
    dispatch(editingProjectActions.setLogoUri(logoUri));
    dispatch(editingProjectActions.setHeaderUri(headerUri));
    dispatch(editingProjectActions.setDescription(description));
    dispatch(editingProjectActions.setTwitter(twitter));
    dispatch(editingProjectActions.setDiscord(discord));
    dispatch(editingProjectActions.setPayButton(payButton));
    dispatch(editingProjectActions.setPayDisclosure(payDisclosure));
    dispatch(editingProjectActions.setHandle(handle));
    onFinish?.();
    reset(data);
    setTab?.();
  };

  return (data: fieldsProps) => {
    onProjectDetailsFormSaved(data);
    reset(data);
    onFinish && onFinish();
  };
};

export default function ProjectDetailsTabContent({ onFinish }: TabContentProps) {
  const { defaultValues, initialValues } = useGetInitialSetDefaultValues();

  const { projectMetadata } = useAppSelector((state) => state.editingV2Project);

  const methods = useForm<fieldsProps>({
    mode: 'onChange',
    resolver: yupResolver(FormSchema),
    defaultValues
  });

  const {
    setValue,
    handleSubmit,
    reset,
    watch,
    formState: { isSubmitting }
  } = methods;

  const { isDirty, buttonText } = useChanged(methods);
  watch();

  const uploadToIpfs = async ({ file, metaData, name }: handleFileUploadProps) => {
    try {
      const res = await pinFileToIpfs(file, metaData);
      const url = ipfsCidUrl(res.IpfsHash);
      setValue(name, url);
    } catch (error) {
      emitErrorNotification(error);
    }
  };

  const onSubmit = useDispatchForm(reset, onFinish);

  const handleReset = () => {
    const onReset = () => onSubmit(initialValues);
    handleSubmit(onReset)();
  };