How do I get Mantine Modals to work with form states

Question

I have a component like this, built with Mantine UI, Nextjs 14, Mantine Forms and the Mantine Forms library.

I tried using the useState to manage form states but whenever I change the role and click outside the select component, the role changes back to the initial value, which is the undesired behaviour.

// All Imports here

const AddMember = ({ id }: { id: string }) => {
 
  const form = useForm<{ email: string; role: Role }>({
    initialValues: {
      role: "Admin",
    },
  });

  async function submitForm(values: { email: string; role: Role }) {
   ...
  }

  const ModalForm = () => {
    return (
      <form
        className="space-y-3"
        onSubmit={form.onSubmit((values) => submitForm(values))}
      >
      
        <Select
          label="Role"
          placeholder="Select the member's role"
          {...form.getInputProps("role")}
          data={[
            { value: "Admin", label: "Admin" },
            { value: "Employee", label: "Employee" },
            { value: "Manager", label: "Manager" },
          ]}
        />

        <Button
          fullWidth
          type="submit"
          onClick={() => {
            //Submit form here
           }
          mt="md"
        >
          Submit
        </Button>
      </form>
    );
  };

  return (
    <Button
      onClick={() => {
        modals.open({
          title: "Add new organisation member",
          children: <ModalForm />,
        });
      }}
    >
      Add Member
    </Button>
  );
};

export default AddMember;

The problem is, whenever I change the role on the Select input, and then I click outside of the input, the form state goes back to the initial role on the form...