How do I fix the issue with my React Todo Counter not showing completed and total variables?

I have a problem with my react code, when I put that I want the completed and total of the todocounter to be the variables, they are not displayed on the screen as they should, being 2 of 4 all completed. But if I remove the variables and put a number, it returns the numbers with no problem, so it’s not a z-index problem.

I don’t know what to do, I’m not an expert in react or anything, I’m a student

this is my app.js

import React from 'react';
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton';
import { Bubbles } from './Bubbles';

const defaultTodos = [
  { text: 'Cortar cebolla', completed: true },
  { text: 'Tomar el curso de Intro a React.js', completed: false },
  { text: 'Llorar con la Llorona', completed: false },
  { text: 'LALALALA', completed: false },
];

function App() {
  const [todos, setTodos] = React.useState(defaultTodos);

  const [searchValue, setSearchValue] = React.useState('');

  const completedTodos = todos.filter(
    todo => !!todo.completed //devuelve un booleano
    ).lenght;
  
  const totalTodos = todos.lenght;

  const searchedTodos = todos.filter(
    (todo) => {
      const todoText = todo.text.toLowerCase();
      const searchText = searchValue.toLowerCase();
      
      return todoText.includes(searchText)
    }
  );
  
  console.log('Los usuarios buscan todos de ' + searchValue);

  return (
    <>
     <TodoCounter 
     completed={completedTodos}
     total={totalTodos} 
     />
     <TodoSearch 
     searchValue={searchValue}
     setSearchValue={setSearchValue}
     />

    <Bubbles />

    <TodoList>
      {searchedTodos.map(todo => ( //El metodo map crea un array a partir del array inicial
        <TodoItem 
        key={todo.text} 
        text={todo.text}
        completed={todo.completed}
        />
      ))} 
      {}
    </TodoList>

    <CreateTodoButton />
    
    </>
  );
}

export default App;

todocounter.js

import React from 'react';
import './styles/TodoCounter.css';

const TodoCounter = ({ completed, total }) => {
  return (
    <h1 className='todo-Title'>
      Has completado <span>{completed}</span> de <span>{total}</span> TODOs
    </h1>
  );
}

export { TodoCounter };

This is what it looks like if I use the variables.

enter image description here

And this is what it looks like if I just use numbers

enter image description here

I tried change the const for a number and it works, but i need that the app put the correct numbers of todos completed and total for complete.