Next.js hot reloads keeps dynamic checkbox data stored, but should be reseted

[levelingup]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

Using final form with next.js and tried to use dynamic checkbox, where new checkboxes will appear based on a list of posts data.

When I check the checkboxes, it gets stored into the values.

<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} className="">
              <div>
                <Field
                  name="post"
                  type="checkbox"
                  component="input"
                  value={post.id}
                >
                  {({ input, meta }) => {
                    return (
                      <input
                        {...input}
                        onChange={(e) => {
                          input.onChange(e); //final-form's onChange
                        }}
                      />
                    );
                  }}
                </Field>
              </div>
            </div>
          );
        })}
      </div>
    </form>
  )}
/>

Right now, if I make a quick change, and when nextjs hot reloads, the checked items are still stored in the values, so when you're rechecking the same checkboxes, it'll add to the values from the previous checkbox.

What is the expected behavior?

When nextjs hot reloads, the data value of the checkbox should reset.