Is there any way to define a signal inside a route component?

An error occurred during route handling or page rendering.

Error: Hook can only be invoked from render methods.
    at Object.i.__h (https://esm.sh/stable/preact@10.15.1/denonext/debug.js:39:147)
    at l (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:168)
    at T (https://esm.sh/stable/preact@10.15.1/denonext/hooks.js:2:1458)
    at E (https://esm.sh/v114/@preact/signals@1.1.3/X-ZS8q/deno/signals.mjs:2:2347)
    at DinosaurPage (file:///C:/Users/user/projects/RoomHome/routes/dinosaur.tsx:32:21)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async render (https://deno.land/x/fresh@1.4.3/src/server/render.ts:216:19)
    at async https://deno.land/x/fresh@1.4.3/src/server/context.ts:794:24
    at async handler (https://deno.land/x/fresh@1.4.3/src/server/context.ts:508:14)
    at async ext:deno_http/00_serve.js:442:22

export default async function DinosaurPage(_req: Request, ctx: RouteContext) {
  const res = await fetch(new URL(`${ctx.url.origin}/api/dinosaur`));

  if (!(res.status === 200)) {
    return (
      <div>
        Error
      </div>
    );
  }

  const { data } = await res.json() as { data: Dinosaur[] };

  const dinosaurs = useSignal<Dinosaur[]>(data);
  const total = useComputed(() => dinosaurs.value.length);

  return (
    <>
      <div class="p-4">
        <h1 class="text-4xl pb-4 font-semibold">
          Mis dinosaurios favoritos :D - Total: {total}
        </h1>
        <div class="flex flex-col gap-4">
          {dinosaurs.value.map((dinosaur: Dinosaur, index: number) => (
            <DinosaurCard dinosaur={dinosaur} />
          ))}
        </div>
      </div>
    </>
  );
}