How change component state without resetting final-form values?

I have a component that contains a form made with react-final-form; all the input fields work fine as in all my other forms, however, i have one custom input that i need for changing the state of the component, and then in the handleSubmit i would add that value to the form data. This is basically a custom input.

However, when i update the state of the component, it is resetting any user input in the other input fields whenever the state is updated. Why is it doing this, or what am i missing here so that changing the component state doesnt reset the values in the other inputs? I know i have seen it work before, but i can't tell the difference.

Here is a simplified version of my form

const MyForm = () => {
    const [period,setPeriod] = useState(new Date())

    const handleSubmit = (data) => {
        console.log(data)
    }

    const handleSelectPeriod = (month) =>{

        setPeriod(month)
    }

    const initialValues = {
        period,
        package_id:context.inheritData.package_id,
        balance:0.00
    }
    return (
        <div>

            <Form
                onSubmit={handleSubmit}
                validate={values => validate(values, schema())}
                initialValues={initialValues}
            >
                    {({handleSubmit})=>(
                            <div>
                                <form onSubmit={handleSubmit}>
                                <div className={'form-group'}>
                                    <label htmlFor="name">Name/label>
                                    <InputField name={'name'} />

                                </div>
                                    <div className={'form-group'}>
                                        <label htmlFor="slug">Slug</label>
                                        <InputField name={'slug'} />
                                    </div>
                                    <div className={'form-group'}>
                                        <MonthYearContainer selectMonth={handleSelectPeriod}/>
                                    </div>
                                    <div className={'form-group'}>
                                        <label htmlFor="balance">Balance Inicial</label>
                                        <InputField name='balance' type={'number'} step={0.01}/>
                                    </div>
                                    <FormButton isLoading={loading} text={'Crear'} textLoading={'Creando Condominio'}/>

                                </form>

                            </div>
                        )}
            </Form>
        </div>
    )
}

The expected behavior is to let the user change the component state without reseting whatever they have already input in the other fields.

Ok so i finally found what is causing this error in case anyone else ever finds themselves in this situation.

I am not sure exactly the technical REASON it behaves this way, but essentially, the error is that the field that i am trying to control through state and manually add to the form data before submission is also being provided inthe initialValues object provided to Form.

By not providing this value in the intialValue objecti can change the state of the component without affecting the values. I would be happy if someone knew the exact cause of this behavior, from a final-form perspective, but at least now i have the answer to be able to fix this issue.