Why in React useReducer simple Todo app I`am gettting "A component is changing an uncontrolled input of type undefined to be controlled.."?

Question

A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

function reducer(state, action) {
  switch (action.type) {
    case "add":
      return {
        todos: [...state.todos, { text: action.text, completed: false }]
      };
    case "toggle":
      return {
        todos: state.todos.map((t, idx) =>
          idx === action.idx ? { ...t, completed: !t.completed } : t
        )
      };
    default:
      return state;

const App = () => {
  const [{ todos, todoCount }, dispatch] = useReducer(reducer, {
    todos: []
  });
  const [text, setText] = useState();

  return (
   <div>
     {todos.map((t, idx) => (
        <div
          key={t.text}
          onClick={() => dispatch({ type: "toggle", idx })}
      }
        >
          {t.text}
        </div>
   <div>
)

Answer 1

Change this line -

const [text, setText] = useState();

to -

const [text, setText] = useState("");

Then it should work.

Refer to this link for proper explanation.