Solucionado
Em DadosPessoas.jsx foi necessário encapsular o componente Form dentro de um arrow functio assim:
{formik => (
<Form onSubmit={formik.handleSubmit}>
// (...)
</Form>
)}
Por que não foi necessário fazer isso também na página Interesses?
Oi, tudo bem?
A principal diferença é a maneira como o Formik é utilizado em cada um desses contextos.
No caso de "DadosPessoas.jsx", o Formik é utilizado diretamente no componente, portanto, é necessário acessar as propriedades e métodos do objeto formik fornecido pelo Formik. Sendo assim, ao encapsular o Form em uma arrow function que recebe formik como parâmetro, podemos acessar as propriedades e métodos diretamente dentro do Form.
Por outro lado, em "Interesses.jsx", o Formik é integrado ao componente de forma indireta, através do componente GrupoRadio. Nesse caso, o GrupoRadio acessa o objeto formik por meio do hook useFormikContext(), não sendo necessário encapsular o Form em uma arrow function.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Entendi.
Então, ou eu encapsulo o componente na arrow function, ou uso o hook useFormikContext, que terá o mesmo resultado é isso?
Oi, tudo bem?
Sim, é isso mesmo. A diferença principal entre encapsular o componente em uma arrow function que recebe formik como parâmetro e usar o hook useFormikContext() está na maneira como você acessa o objeto formik dentro do componente.
Quando você encapsula o componente na arrow function, você passa explicitamente o objeto formik como um parâmetro para o componente. Isso é útil quando você quer ter acesso direto às propriedades e métodos de formik dentro do componente.
Quando você usa o hook useFormikContext(), você está acessando o contexto do Formik diretamente dentro do componente sem a necessidade de passar o objeto formik explicitamente. Isso é mais conveniente e reduz a necessidade de passar props através de vários níveis de componentes.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Obrigado pelos esclarecimentos!