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

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>
</>
);
}