I'm using React Final Form checkboxes. When I make a change in my code, the nextjs does a hot reload, but the form values/data keeps the checkbox to be still truthy but the checkbox becomes unchecked. I thought if it reloads, it should reset the form?

So for example, if I have 2 items in a list with checkboxes, if I check 1 item, I'll have a length of 1, then when nextjs hot reloads, it looks like nothing is checked (which should be expected), but if I check the same item, it will add to the list with length of 2 items checked (1 from prior hot reload, and then another 1 after hot reload)

<Form
  onSubmit={onSubmitCheckbox}
  render={({ handleSubmit, submitting, values }) => (
    <form onSubmit={handleSubmit} className="">
      <button type="submit" disabled={submitting}>
        Delete multiple
      </button>
      <div>
        {posts.map((post, index) => {
          return (
            <div key={index}>
              <div>
                <Field
                  name="post"
                  type="checkbox"
                  component="input"
                  value={post}
                  // onChange={(event, value) =>
                  //   console.log("checked", event, value)
                  // }
                >
                  {({ input, meta }) => {
                    return (
                      <input
                        {...input}
                        onChange={(e) => {
                          input.onChange(e); //final-form's onChange
                          console.log("onChange", values);
                        }}
                      />
                    );
                  }}
                </Field>
              </div>
            </div>
          );
        })}
      </div>
    </form>
  )}
/>

Is this supposed to be expected behavior? Am I doing the checkboxes wrong?

const onSubmitCheckbox = (values) => {
  const { post } = values;
  console.log("submitting checkbox", post.length);
};

This is the onsubmit function and it will display 2 of the post items.