My problem is as the title says. Whenever I'm trying to use this code:

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
export default async function lookupPage() {
  const [status, setStatus] = useState("");
  const { push } = useRouter();
  //.....
  } else {
    useEffect(() => {
      setStatus('checking'); //here is my line that causes the problem
      fetch("/api/lookup", {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ url: domain }),
      })
        .then((response) => response.json())
        .then((res) => {
          console.log(res);
        });
    }, []);

    return (
//..........

When I'm trying to view this I get "Unhandled Runtime Error": "Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server."

I am using the "use client" because of redirecting with the "push" of the "useRouter".
My next, react, react-dom and typescript are all up to date.

Edit: It was working for me before with the App router, I don't know why it is now giving me this weird error