Making all my components 'use client' while maintaining protectedProcedures

//imports go here

const Page = () => {
  return (
    <main className="flex h-screen justify-center">
      <div className="h-full w-full max-w-md border-x border-slate-400">
        <div>Todos:</div>
        <Todos />
      </div>
    </main>
  );
};

export default Page;

const Todos = async () => {
  const session = await getServerAuthSession();
  if (!session?.user) return <div>Sign in to see your todos</div>;

  const todos = await api.todo.getTodos.query();

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id} className="w-full">
          <TodoItem id={todo.id} />
        </div>
      ))}
    </div>
  );
};

"use client";
//imports go here

export const TodoItem = ({ id }: { id: string }) => {
  const todo = api.todo.getTodoById.useQuery({ id: id });

  return (
    <div className="m-4 flex items-center justify-between">
      <div className="flex gap-2">
        <Checkbox
          id="title"
          onCheckedChange={() => {
            console.log(`change: ${id}`);
          }}
        />
        <Label htmlFor="title">{todo.data?.title}</Label>
      </div>
      <Button asChild>
        <Link href={`/todo/${id}`}>Edit</Link>
      </Button>
    </div>
  );
};