Why does my form default value not re-render?

export const Route = createFileRoute('/product-backlog/task/edit/$taskID')({
  component: EditTask,
  loader: ({ params }) => {
    return fetchTask(params.taskID)
  }
})

function EditTask() {
  const task = Route.useLoaderData()
  const { taskID } = Route.useParams()

  const navigate = useNavigate({ from: "/product-backlog/task/edit/$taskID" })
  const navigateTo = () => { 
    navigate({ to: "/product-backlog" })
  }

  const editTask = async (formData: FormData) => {
    // Edit Task
    navigateTo()
  }

  return <TaskEditor task={task} action={editTask} navigateTo={navigateTo} deleteTask={deleteTask} />
}

function TaskEditor(props: TaskEditorProps) {

    return (
        <section>
            <form action={props.action}>
                <input defaultValue={props.task?.name || ""} />
                <button>Save</button>
            </form>
        </section>
    )
}

export default TaskEditor