Fiz meu código pra validar o cpf de outra forma:
const [inputError, setInputError] = useState('')
function cpfIsValid(){
if(cpf.length != 11){
setInputError('CPF deve ter 11 digitos')
return
}
setInputError('')
}
<TextField
required
value={cpf}
onChange={e => setCpf(e.target.value)}
onBlur={cpfIsValid}
error={!!inputError}
helperText={inputError}
label="CPF"
variant="outlined"
fullWidth
margin="normal"
/>
Vou deixar um post da rocketseat falando sobre Falsy e Truthy (dois pontos de exclamação) no javascript
https://blog.rocketseat.com.br/entendendo-falsy-e-truthy-no-javascript/