React testing a form - reactjs

Question

I am trying to test my sign-in form for a react app. Basically the user signs up, and then the form will make an api post request to node.js server that will then post the data into a MySQL databases
The HTML for the form is:
<div className="signup">
<div className="signup__wrapper">
<div className="signup__banner">
<h2 className="signup__logo">Leep</h2>
<h2 className="signup__title">Please Sign Up to find artist</h2>
</div>
<form className="form" onSubmit={handleSubmit} autoComplete='off'>
<div className="form__container">
<input
className={!email.error? `form__input ${email.value? 'form__valid':''}`: "form__input error"}
type='text'
id='email'
data-testid='email'
name='email'
value={email.value}
onChange={handleEmail}
autoComplete='off'
/>
<label className="form__label" htmlFor="email">What's your email?</label>
</div>
<div className="form__container">
<input
className={!confirmEmail.error? `form__input ${confirmEmail.value? 'form__valid':''}`: "form__input error"}
type='text'
id='confirmemail'
data-testid='confirmemail'
name='confirmemail'
value={confirmEmail.value}
onChange={handleConfirmEmail}
/>
<label className="form__label" htmlFor="confirmemail">Please confirm your email?</label>
</div>
<div className="form__container">
<input
className={!username.error? `form__input ${username.value? 'form__valid':''}`: "form__input error"}
type='text'
id='username'
data-testid='username'
name='username'
value={username.value}
onChange={handleUserName}
/>
<label className="form__label" htmlFor="username">What's your user name?</label>
</div>
<div className="form__container">
<input
className={!password.error? `form__input ${password.value? 'form__valid':''}`: "form__input error"}
type='password'
id='password'
name='password'
data-testid='password'
value={password.value}
onChange={handlePassword}
/>
<label className="form__label" htmlFor="password">What's your password?</label>
</div>
<div className="form__container">
<input
className={!confirmPassword.error? `form__input ${confirmPassword.value? 'form__valid':''}`: "form__input error"}
type='password'
id='confirmPassword'
data-testid='confirmPassword'
name='confirmPassword'
value={confirmPassword.value}
onChange={handleConfirmPassword}
/>
<label className="form__label" htmlFor="confirmPassword">Please confirm your password</label>
</div>
<button className="form__btn" type="submit">
Sign up
</button>
<div className="signup__redirect">
<h3 className="signup__redirect--message">Already have an account?</h3>
<Router>
<Link className="signup__redirect--link" to='/login'>
Log in.
</Link>
</Router>
</div>
</form>
</div>
</div>
And here is the code that I am trying to use to test the form submission:
import React from "react";
import ReactDOM from "react-dom";
import SignupPage from "./SignupPage";
import {render, screen, waitFor } from '#testing-library/react'
import user from '#testing-library/user-event'
it("renders without crashing", ()=> {
const div = document.createElement("div")
ReactDOM.render(<SignupPage></SignupPage>, div)
})
describe('SignUpform', () => {
const onSubmit = jest.fn();
window.alert = jest.fn()
beforeEach(() => {
onSubmit.mockClear()
render(<SignupPage onSubmit={onSubmit} />)
});
it('onSubmit is called when all fields pass validation', async () => {
window.alert = () => {};
user.type(getEmail(), 'test#gmail.com')
user.type(confirmEmail(), 'test#gmail.com')
user.type(getUsername(), 'test')
user.type(getPassword(), '1234')
user.type(getConfirmPassword(), '1234')
user.click(screen.getByRole('button'))
await waitFor(() => {
expect(onSubmit).toBeCalledWith({
email: 'test#gmail.com',
confirmemail: 'test#gmail.com',
username: 'test',
password: '1234',
confirmpassword: '1234',
})
expect(onSubmit).toHaveBeenCalledTimes(1)
})
});
})
function getEmail () {
return screen.getByTestId('email', {
name: /email/i
})
}
function confirmEmail () {
return screen.getByTestId('confirmemail', {
name: /confirmemail/i
})
}
function getUsername () {
return screen.getByTestId('username', {
name: /username/i
})
}
function getPassword () {
return screen.getByTestId('password', {
name: /password/i
})
}
function getConfirmPassword() {
return screen.getByTestId('confirmPassword', {
name: /confirmpassword/i
})
}
console out put of the error that is followed by the html elements of the form
here is where the code is stating the error I am not sure what is wrong.