Não sei o que aconteceu, mas quando coloco o valido como estado padrão true, ele executa como se estivesse falso, e vice-versa, então tive que deixar o código assim, alguma sugestão? Tentei deixar só o essencial do código, onde eu acredito estar o erro, mas se precisarem dele completo eu anexo aqui.
FormularioCadastro.jsx
const [erros,setErros] = useState({cpf:{valido:false, texto:""}});
<TextField
value={cpf}
onChange={(event) => {
setCpf(event.target.value);
}}
onBlur={(event)=>{
const ehValido = validarCPF(cpf);
setErros({cpf:ehValido});
}}
error={erros.cpf.valido}
helperText={erros.cpf.texto}
id="CPF"
label="CPF"
variant="outlined"
margin="normal"
fullWidth />
App.js
<FormularioCadastro aoEnviar={aoEnviarForm} validarCPF={validarCPF}/>
function validarCPF(cpf) {
if(cpf.length !== 11){
return {valido:true, texto:"CPF deve ter 11 dígitos"}
}else{
return {valido:false, texto:""}
}
}