Nestjs and firebase connection issue (can't reach next page)

Question

`I'm using Nextjs in my code but I faced this problem -

Firebase connection is working but the issue is with tag. It should follow this router.push("/dashboard") but it's not because of Form tag.

My coding is not working with the tag

import styles from "../styles/signup.module.css";
import { useState } from "react";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { app } from "../firebaseConfig";
import { useRouter } from "next/router";
import Link from "next/link";

export default function Signup() {
  const auth = getAuth();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const next = () => {
    createUserWithEmailAndPassword(auth, email, password).then(() => {
      router.push("/dashboard");
    });
  };

  return (
    <>
      <div className={styles.bg}>
        <div className={styles.text}>
          <h1>
            <strong>Signup</strong>
          </h1>
        </div>
        <br />

        <div className={styles.form}>
<form>
            <label for="email">Email Address </label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Email Address"
              onChange={(event) => setEmail(event.target.value)}
              value={email}
            />
            <br />
            <br />
            <label for="last">Password </label>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Password"
              onChange={(event) => setPassword(event.target.value)}
              value={password}
            />
            <br />
            <br />

            <button className={styles.button} onClick={next}>
              Submit
            </button>
            </form>
        </div>
      </div>
    </>
  );
}

Again, My code that is working when not using tag.

It should follow this router.push("/dashboard") now it's working after removing the Form tag.

import styles from "../styles/signup.module.css";
import { useState } from "react";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { app } from "../firebaseConfig";
import { useRouter } from "next/router";
import Link from "next/link";

export default function Signup() {
  const auth = getAuth();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const next = () => {
    createUserWithEmailAndPassword(auth, email, password).then(() => {
      router.push("/dashboard");
    });
  };

  return (
    <>
      <div className={styles.bg}>
        <div className={styles.text}>
          <h1>
            <strong>Signup</strong>
          </h1>
        </div>
        <br />
        
        <div className={styles.form}>
    
            <label for="email">Email Address </label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Email Address"
              onChange={(event) => setEmail(event.target.value)}
              value={email}
            />
            <br />
            <br />
            <label for="last">Password </label>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Password"
              onChange={(event) => setPassword(event.target.value)}
              value={password}
            />
            <br />
            <br />

            <button className={styles.button} onClick={next}>
              Submit
            </button>
       
        </div>
      </div>
    </>
  );
}