Tengo problemas con initialValues en mi proyecto, donde estoy usando react-final-form.

Lo que estoy buscando es tener múltiples valores iniciales para establecer en la lista de casillas de verificación.

Soy consciente de la propiedad initialValues sobre dónde puedo configurarla desde allí, como a continuación.

 <Form onSubmit={onSubmit} initialValues={{ sauces: ["ketchup", "mustard"] }} render={({ handleSubmit, form, values, ...formProps }) => ( <form onSubmit={handleSubmit}> <div> <label>Sauces</label> <div> <label> <Field name="sauces" component="input" type="checkbox" value="ketchup" />{" "} Ketchup </label> <label> <Field name="sauces" component="input" type="checkbox" value="mustard" />{" "} Mustard </label> </form> />

Pero quiero poder usar initialValue en su lugar porque no tengo acceso a donde estoy representando las casillas de verificación.

 <Form onSubmit={onSubmit} render={({ handleSubmit, form, values, ...formProps }) => ( <form onSubmit={handleSubmit}> <div> <label>Sauces</label> <div> <label> <Field name="sauces" component="input" type="checkbox" value="ketchup" initialValue={["ketchup", "mustard"]} />{" "} Ketchup </label> <label> <Field name="sauces" component="input" type="checkbox" value="mustard" initialValue={["ketchup", "mustard"]} />{" "} Mustard </label> </form> />

Tengo un ejemplo de código a continuación donde configuro valores iniciales a través de y también a través de

Funciona bien en el ejemplo, pero en los valores se establecen, pero no puedo editar las casillas de verificación cuando uso initialValue en . Lo probé tanto con un solo valor como con múltiples valores. ¿Es esto un error dentro de la forma final de reacción o se puede lograr de otra manera?

https://codesandbox.io/s/react-final-form-issues-with-checkboxes-forked-6fc68u?file=/index.js