How to fix Async component function detected but component is not async in React

// If your component looks like this with no client features:
"use client";  // ← Remove this line

async function MyComponent() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

// WRONG - Client Component cannot be async
"use client";

async function MyComponent() {
  const data = await fetchData();
  return <div onClick={handleClick}>{data.title}</div>;
}

// CORRECT - Use useEffect for data fetching
"use client";
import { useState, useEffect } from "react";

function MyComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  return <div onClick={handleClick}>{data?.title}</div>;
}

// ServerComponent.tsx (async, no "use client")
async function ServerComponent() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ClientComponent.tsx (not async, has "use client")
"use client";

interface Props {
  data: DataType;
}

function ClientComponent({ data }: Props) {
  const handleClick = () => {
    // Client-side logic
  };
  
  return <div onClick={handleClick}>{data.title}</div>;
}

// actions.ts
"use server";

export async function submitForm(formData: FormData) {
  const result = await saveToDatabase(formData);
  return result;
}

// ClientComponent.tsx
"use client";
import { submitForm } from "./actions";

function ClientComponent() {
  const handleSubmit = async (formData: FormData) => {
    const result = await submitForm(formData);
    // Handle result
  };
  
  return <form action={handleSubmit}>...</form>;
}

"use client";
import useSWR from "swr";

function ClientComponent() {
  const { data, error, isLoading } = useSWR("/api/data", fetcher);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;
  
  return <div onClick={handleClick}>{data.title}</div>;
}

// app/page.tsx (Server Component - can be async)
async function Page() {
  const data = await fetchData();
  return (
    <div>
      <ServerContent data={data} />
      <InteractiveButton />  {/* This can be a Client Component */}
    </div>
  );
}