Dificuldade ao validar o CPF

Oi pessoal. Tudo bem?

Então, o meu código está 100% igual ao do vídeo, mas na parte de exibir o texto 'cpf deve ter 11 dígitos' não quer ir de jeito nenhum, inclusive eu já fiz algumas mudanças conforme o tópico 'outra forma bem mais simples de validar cpf' e ainda assim, não exibe o texto pro usuário para digitar os 11 numeros..

Se eu digitar 9, 10, 11 ou 12 digitos, continua mudando a cor pra vermelho também, não sei porque isso está acontecendo.

Vou copiar os codigos de cada arquivo aqui pra vcs lerem e me auxiliarem ok?

Alguém pode me ajudar por gentileza?

app.js

import React from "react";
import "./App.css";
import FormularioCadastro from "./components/formulariocadastro/FormularioCadastro";
import { Container, Typography } from "@mui/material/";
import "@fontsource/roboto/300.css";

function App() {
  return (
    <Container component="article" maxWidth="sm">
      <Typography variant="h3" component="h1" align="center">
        Formulário de Cadastro
      </Typography>
      <FormularioCadastro aoEnviar={aoEnviarForm} validarCPF={validarCPF} />
    </Container>
  );

  function aoEnviarForm(dados) {
    console.log(dados);
  }

  function validarCPF(cpf) {
    if (cpf.length !== 11) {
      return { cpf: { valido: false, texto: "CPF deve conter 11 digitos!!" } };
    } else {
      return { cpf: { valido: true, texto: "" } };
    }
  }
}

export default App;

cadastroFormulario.js

import React, { useState } from "react";
import { TextField, Button, Switch, FormControlLabel } from "@mui/material/";

function FormularioCadastro({ aoEnviar, validarCPF }) {
  const [nome, setNome] = useState("");
  const [sobrenome, setSobrenome] = useState("");
  const [cpf, setCpf] = useState("");
  const [promocoes, setPromocoes] = useState(false);
  const [novidades, setNovidades] = useState(false);
  const [erros, setErros] = useState({ cpf: { valido: true, texto: "" } });

  return (
    <>
      <h2>ola mundo</h2>

      <form
        onSubmit={(event) => {
          event.preventDefault();
          aoEnviar({ nome, sobrenome, cpf, novidades, promocoes });
        }}
      >
        <TextField
          value={nome}
          onChange={(event) => {
            setNome(event.target.value);
          }}
          id="nome"
          label="Nome"
          variant="outlined"
          fullWidth
          margin="normal"
        />

        <TextField
          value={sobrenome}
          onChange={(event) => {
            setSobrenome(event.target.value);
          }}
          id="sobrenome"
          label="Sobrenome"
          variant="outlined"
          fullWidth
          margin="normal"
        />

        <TextField
          value={cpf}
          onChange={(event) => {
            setCpf(event.target.value);
          }}
          onBlur={() => {
            const ehValido = validarCPF(cpf);
            setErros({ cpf: ehValido });
          }}
          error={!erros.cpf.valido}
          helpText={erros.cpf.texto}
          id="CPF"
          label="CPF"
          variant="outlined"
          margin="normal"
          fullWidth
        />

        <FormControlLabel
          label="Promoções"
          control={
            <Switch
              checked={promocoes}
              onChange={(event) => {
                setPromocoes(event.target.checked);
              }}
              name="promocoes"
              label="Promoções"
            />
          }
        />

        <FormControlLabel
          label="Novidades"
          control={
            <Switch
              checked={novidades}
              onChange={(event) => {
                setNovidades(event.target.checked);
              }}
              name="novidades"
              label="Novidades"
            />
          }
        />

        <Button type="submit" variant="contained">
          Cadastrar
        </Button>
      </form>
    </>
  );
}

export default FormularioCadastro;