date-fns formatRelative RangeError: Invalid time value when using basic new Date() js function

Question

I'm making a todo list app in react, and want to use formatRelative for the date created. When the todo is created, I set a new Date() to a variable, and then set that date as todo.created. It is then stored in the App's state and subsequently sent to a firebase server for storage. However, when I reload the page, I get the RangeError: Invalid time value for when the todo list tries to render.

Here is some code:

// creating the todo:
submitHandler = () => {
    const today = new Date();
    this.props.addTodo({
        id: this.props.nextId(),
        title: document.querySelector(".modal-title-input").value,
        description: document.querySelector(".modal-desc-input").value,
        due: document.querySelector(".modal-due-date-input").value,
        priority: document.querySelector(".modal-priority-input").value,
        created: today,
        done: false,
    });

// when the todo is rendered:
const todo = this.props.todo;
const today = new Date();
console.log(isValid(today, todo.created))    // true, true
console.log(formatRelative(today, todo.created));  // RangeError

Answer 1

Thank you @RobG. I was able to fix the issue once you guys helped me realize the problem was how the object was being received back from Firebase. I was able to fix the problem by simply using the toDate() function:

// declared before the class
const fireLibrary = db.collection("todos").doc("library");

// inside the class
componentDidMount() {
    fireLibrary.get().then((doc) => {
        if (doc.exists && doc.data().todosLibrary) {
            const lib = doc.data().todosLibrary.map(item => {
                item.created = item.created.toDate()
                return item
            })
            this.setState({ todosLibrary: lib });
        }
    });
}