useSetRecoilState doesn't update atom on hosting environment

Question

I am currently working on creating an input page and input confirmation page. In the input page, I save the values ​​entered by the user using the useSetRecoilValue function and store them in an atom. Then, in the input confirm page, I retrieve the stored values using the useRecoilValue function.

The issue is that everything works fine in my local development environment but does not work correctly when hosted on Firebase. I suspect that the values might not be stored properly in the input page.

What could be a potential solution to this problem? I'm using ReactJS, NextJS(14), TypeScript, Recoil.

/**
 * atom for save name
 */
export const applyAtom = atom({
  key: "applyData",
  default: {
    name: ""
  },
});


/**
 * input page
 */

const Page: FC = () => {
  const router = useRouter();
  const methods = useForm();
  const setApplyData = useSetRecoilState(applyAtom);

  const onSubmit = useCallback((data) => {
    setApplyData(data);
    router.push("/apply/confirm");
  }, []);

  return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
      <div className={styles["text-fields"]}>
        <input
          type="text"
          className={styles["field"]}
          {...methods.register("name")}
        />
      </div>
      <button type="submit">next</button>
    </form>
  );
};
export default Page;


/**
 * input confirm page
 */
const Page: FC = () => {
  const methods = useForm();
  const applyData = useRecoilValue(applyAtom);

  const onSubmit = () => {
    console.log(applyData);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <dl>
          <dt>name</dt>
          <dd>{applyData["name"]}</dd>
        </dl>
      </form>
    </FormProvider>
  );
};
export default Page;