Uncaught TypeError: Cannot read properties of undefined (reading 'length') in the submit form

I want to show my todo in the console when pressing the "Agregar" button, but I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'length'), could you give me a hand?

TodoApp.jsx

import { useReducer } from "react"
import { todoReducer } from "./todoReducer";
import { TodoList } from "./TodoList";
import { TodoAdd } from "./TodoAdd";


export const TodoApp = () => {
    const initialState = [
      {
        id: new Date().getTime(),
        description: "recolectar piedra de alma",
        done: false,
      },
      {
        id: new Date().getTime() * 3,
        description: "recolectar piedra de infinito",
        done: false,
      },
    ];
  
    const [todos, dispatchTodo] = useReducer(todoReducer, initialState);
  
    const handleNewTodo = (todo) => {
      console.log({todo});
    };
  
    return (
      <>
        <h1>
          TodoApp (10) <small>Pendientes 2</small>
        </h1>
        <hr />
  
        <div className="row">
          <div className="col-7">
            <TodoList todos={todos} />
          </div>
        </div>
  
        <div className="col-5">
        <h4>Agregar TODO</h4>
        <hr />
        <TodoAdd onNewTodo={handleNewTodo} />
        </div>
      </>
    );
  };

TodoAdd.jsx:

import { useForm } from '../hooks/useForm';


export const TodoAdd = ({ onNewTodo }) => {

    const { description, onInputChange, onResetForm } = useForm({
        description: ''
    });

    const onFormSubmit = ( event ) => {
        event.preventDefault();
        if ( description.length <= 1 ) return;

        const newTodo = {
            id: new Date().getTime(),
            done: false,
            description: description,
        }

        onNewTodo(newTodo);
        onResetForm();
    }


    return (
        <form onSubmit={ onFormSubmit }>
            <input 
                type="text" 
                placeholder="¿Qué hay que hacer?"
                className="form-control"
                name="description"
                value={ description }
                onChange={ onInputChange }
            />

            <button 
                type="submit"
                className="btn btn-outline-primary mt-1"
            >
                Agregar
            </button>
        </form>
    )
}

From what I understand, the description never arrives as a property to the form, since when using the .length it does not return any number, so that is why the property is not fulfilled, but I really don't know what to do

Do you return description from useForm?
Define useForm as follows may solve the problem.

export const useForm = ({ description }) => {
  const [newDescription, setNewDescription] = useState(description);
  const onInputChange = (e) => {
    setNewDescription(e.target.value);
  };
  const onResetForm = () => {
    setNewDescription("");
  };
  return { description: newDescription, onInputChange, onResetForm };
};