⨯ useSearchParams() should be wrapped in a suspense boundary at page "/login". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error

"use client";
import "../../../style/login.css";
import Link from "next/link";
import React, { useRef, Suspense } from "react";
import { signIn } from "next-auth/react";
import { useSearchParams } from "next/navigation";

const LoginPage = () => {
  const email = useRef("");
  const password = useRef("");
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get("callbackUrl");

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    await signIn("credentials", {
      email: email.current,
      password: password.current,
      redirect: true,
      callbackUrl: callbackUrl ?? "http://localhost:3000",
    });
  };

  return (
    <Suspense fallback={<div>Chargement...</div>}>
      <div className="container">
        <form onSubmit={onSubmit}>
          <div>
            <h1>Connexion</h1>
            <p>Connectez-vous</p>
          </div>
          <div className="form-group">
            <input
              type="email"
              placeholder="your@mail.com"
              onChange={(e) => (email.current = e.target.value)}
            />
            <input
              type="password"
              placeholder="********"
              onChange={(e) => (password.current = e.target.value)}
            />
          </div>
          <button type="submit">Connectez-vous</button>
          <Link href="/">Annuler</Link>
        </form>
      </div>
    </Suspense>
  );
};

export default LoginPage;