Mantine form context not persisting form values

Question

With Mantine and Remix, I wanted to persist values of a form I created so that if the user is navigating to other pages and return back to the form, the values won't reset. So as submitting, I want to persist the values until logout.

Since using Mantine, I created a form context for my form (since I thought it is global context). Now, on navigating, the values being reset.

Here's part of the implementation:

./form-context.tsx

import { createFormContext } from "@mantine/form";

interface DnhaAddFormValues {
  name: string;
  description: string;
 ...
}

export const [
  DnhaAddFormProvider,
  useDnhaAddFormContext,
  useDnhaAddForm
] = createFormContext<DnhaAddFormValues>();

The form component is as follows: ./Form.tsx

...
import {
  DnhaAddFormProvider,
  useDnhaAddForm,
  useDnhaAddFormContext,
} from "./form-context";
...

type Props = {
  form: ReturnType<typeof useDnhaAddForm>;
};

const Form = ({ form }: Props) => {
  const submit = useSubmit();
  ...

  const formValues = useDnhaAddFormContext();

  return (
    <Flex ...>
      <Form
        method="post"
        onSubmit={form.onSubmit((_values, event) =>
          submit((event as React.FormEvent<HTMLFormElement>).currentTarget)
        )}
        ...
      >
         ...
        {/* Name */}
        <TextInput
          ...
          {...formValues.getInputProps("name")}
        />

        {/* Description */}
        <Textarea
         ...
          {...formValues.getInputProps("description")}
        />
         ...
         ...
         ...
        </Flex>
       ...
      </Form>
    </Flex>
  );
};

export default Form;

And it goes in the route.tsx:

...
import DnhaAddForm from "./Form";
import { DnhaAddFormProvider, useDnhaAddForm } from "./form-context";

...

// Route
const route = () => {
  ...

  // Form values
  const dnhaAddForm = useDnhaAddForm({
    initialValues: {
      name: "",
      description: "",
     ...
    },
    ...
  });

  return (
    <>
      ...
      <DnhaAddFormProvider form={dnhaAddForm}>
        <DnhaAddForm form={dnhaAddForm} />
      </DnhaAddFormProvider>
    </>
  );
};

export default route;

To be honest, I'm not surprised about this behavior because the provider isn't wrapping all the pages. Should I use Redux-Toolkit for this reason and remove the context? Or Mantine has some alternative?