// Create Multieditior 
const multiEditor = createMultieditor(editor => ({
  initialData: {
    id: "myId", // Initial Id
    email: undefined, // Inital Email
    name: undefined, // Inital Name
  },
  onSubmit: async (data) => {
    console.log("Submitted ", data);  // <---------
  }, //                                           |
  // Properties that are always passed to the 'onSubmit()' method
  fixedProperties: ["id"],
  validationSchema: {
    // Validation with inbuilt tree shakable validation methods
    email: agileResolver(isString, isEmail, isRequired),
    // Validation with external validatiors like Yup
    name: yupResolver(Yup.string().required().max(10).min(2)),
  }
}));

// Use the Multieditor in any UI-Form
// ..
<label>First Name:</label>
<input
onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
defaultValue={signUpEditor.getItemInitialValue("firstName")}
/>
<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
// ..

// Submit Multieditor and see what the 'onSubmit()' method will log
multiEditor.submit();
// Submited {
//   id: "myId",
//   name: "Jeff",
//   email: "test@test.com"
// }

// Simple and tree shakable inbuilt validation
agileResolver(isRequired, isString('custom error message'), isEmail);

// Easy integration with external validation libraries like Yup
yupResolver(Yup.string().email());

// Easy value compution
computeMethods: {
  name: (value) => {
    return value.toLowerCase();
  }
}