Is it possible to use Flowbite with Next.js 13?

Question

I'm trying to use flowbite in next13. I'm trying to create a Apple Login button in the component directory. However, an error occurred whether the button of the flowbite was a client side component, so I tried to make it a client side component through 'use client'. However, the following error still occurs. What should I do?

You're importing a component that needs flushSync. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

/src/app/login/page.tsx

import AppleLogin from "@/components/main/atom/AppleLogin";
import Card from "@/components/wrapper/Card";
import Grid from "@/components/wrapper/Grid";
import Link from "next/link";
import React from "react";

export default function Home() {
  return (
    <>
      <Grid grid="col-span-3"></Grid>
      <Grid grid="col-span-6" className="h-[500px]">
        <Card className="flex flex-col items-center px-[100px] py-[50px] justify-between">
          <div className="w-full text-heading2 font-bold">Login</div>
          <div className=" flex flex-col w-full h-[246px] justify-between">
            <AppleLogin />
          </div>
          <Link
            href="/test"
            className="underline underline-offset-4 text-[#FF5F05] font-bold"
          >
            test
          </Link>
        </Card>
      </Grid>
      <Grid grid="col-span-3"></Grid>
    </>
  );
}

/src/components/main/atom/AppleLogin.tsx

"use client";
import React from "react";
import { Button } from "flowbite-react";
import Apple from "public/icons/brand/Apple.svg";
export default function AppleLogin() {
  return (
    <Button className="w-full h-[48px] bg-[#000000]">
      <Apple />
    </Button>
  );
}

I tried to erase 'use client'; but it didn't work out. What should I do?