React todo app: “TypeError: t is not iterable”. What am I missing?

Building a to do app with React(vite) using useState. While trying to implement localStorage, I encountered an error where my app runs fine on the npm run dev server, but on the live commit, the form functionality is broken, and throws a TypeError:

index-b568087f.js:61 Uncaught TypeError: t is not iterable
    at o (index-b568087f.js:61:377)
    at onClick (index-b568087f.js:61:798)
    at Object.Ld (index-b568087f.js:37:9855)
    at Ad (index-b568087f.js:37:10009)
    at Id (index-b568087f.js:37:10066)
    at Ds (index-b568087f.js:37:31459)
    at Rc (index-b568087f.js:37:31876)
    at index-b568087f.js:37:36788
    at tc (index-b568087f.js:37:8967)
    at Yo (index-b568087f.js:37:33162)

This one is new to me, so any help is appreciated. Below is my App.jsx, which contains all the code for my application.

import "./App.css";

// components
import Header from "./Components/Header.jsx";
import { useState, useEffect } from "react";

function App() {
    const localList = JSON.parse(localStorage.getItem("list"));

    // state with list of todos
    const [list, setList] = useState(localList);

    useEffect(() => {
        localStorage.setItem("list", JSON.stringify(list));
    }, [list]);

    // state with input value
    const [input, setInput] = useState("");

    // function to add todos
    const addTodo = (todo) => {
        const newTodo = {
            id: Math.random(),
            todo: todo,
        };

        // add the todo to the list
        if (input !== "" && input !== " ") {
            setList([...list, newTodo]);
        }

        // clear input box
        setInput("");
    };

    const submitOnEnter = (e) => {
        e.preventDefault();
        if (e.key === "Enter") {
            if (input === "" || input === " ") {
                return;
            }
            document.getElementById("addTask").click();
        }
    };

    const deleteTodo = (id) => {
        // filter out todo with id
        const newList = list.filter((todo) => todo.id !== id);

        // set list state to be the filtered list
        setList(newList);
    };

    return (
        <>
            <div className="container">
                <Header />
                <div className="inputContainer">
                    <input
                        type="text"
                        value={input}
                        onChange={(e) => setInput(e.target.value)}
                        id="inputField"
                        onKeyUp={submitOnEnter}
                    />
                    <button id="addTask" onClick={() => addTodo(input)}>
                        Add
                    </button>
                </div>

                <ul>
                    {list?.map((todo) => (
                        <div className="todoItemContainer">
                            <li className="todoItem" key={todo.id}>
                                {todo.todo}
                            </li>
                            <button
                                className="deleteTodo"
                                onClick={() => deleteTodo(todo.id)}
                            >
                                &times;
                            </button>
                        </div>
                    ))}
                </ul>
            </div>
        </>
    );
}

export default App;

Initially, I was trying to solve a problem where .map was reading undefined. I fixed this by adding a ternary operator (list?.map) to check that list was an array.

After that, everything continued to work great on the npm run dev server, but the live commit’s functionality subsequently broke.

I’ve looked through the DevTools and am pretty sure the error is coming from calling the AddTodo() function, but I’m stumped on how to solve it. I’ve checked some other Stack Overflow posts and am having some trouble figuring this out.

Of course I can’t preview the dev server but I’ve linked the live commit below.

repo: https://github.com/noahpittman/todo-app-vite-react

commit: https://todoreact-np.netlify.app/