error trying to consume the back-end using react - node.js

Question

I'm trying to consume but I've been receiving an error:
{error: {…}}
error
:
{clientVersion: '4.9.0'} but my api is working. I can't consume it on front-end
I put many console logs when I submit and the result is
{firstName: 'Matheus', lastName: 'Coppi', role: 'enginner', age: '23', email: 'matheus#gmail', …}
Response {type: 'cors', url: 'http://localhost:8080/register', redirected: false, status: 200, ok: true, …}
{error: {…}}
error: {clientVersion: '4.9.0'}
The error is my catch from my api
async createUser(req, res) {
try {
const {
firstName,
lastName,
role,
age,
email,
password
} = req.body
const salt = await bcrypt.genSalt();
console.log(salt)
const hash = await bcrypt.hash(password, salt)
console.log(hash)
const verifyemail = await prisma.UserInfo.findUnique({
where: {
email
}
})
if (verifyemail) {
return res.send({
"error": "true"
})
}
const user = await prisma.UserInfo.create({
data: {
firstName: firstName,
lastName: lastName,
role: role,
age: age,
email: email,
password: hash
}
});
return res.send(user)
} catch (error) {
return res.json({ error }) // The error client version is from here
}
}
Here is my react front-end
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
const Register = () => {
const [firstName, setFirstName] = useState('')
const [lastName, setlastName] = useState('')
const [role, setRole] = useState('')
const [age, setAge] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
const info = {firstName, lastName, role, age, email, password}
console.log(info)
fetch("http://localhost:8080/register", {
method: 'POST',
headers: { "Content-Type": "application/json" },
body: JSON.stringify(info)
}).then(async response => {
console.log(response) //until here it works
try {
const data = await response.json()
console.log(data)
} catch(error) {
console.log('Error happened here!')
console.error(error)
}
})
}
return (
<div className='all1'>
<div className="container d-flex justify-content-center">
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>First Name</Form.Label>
<Form.Control type="text" placeholder="First Name" value={firstName} onChange={(e) => setFirstName(e.target.value)}/>
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" placeholder="Last Name" value={lastName} onChange={(e) => setlastName(e.target.value)} />
<Form.Label>Role</Form.Label>
<Form.Control type="text" placeholder="role" value={role} onChange={(e) => setRole(e.target.value)}/>
<Form.Label>Age</Form.Label>
<Form.Control type="number" placeholder="age" value={age} onChange={(e) => setAge(e.target.value)}/>
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)}/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)}/>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
</div>
<div>{email}</div>
<div>{password}</div>
</div>
);
}
export default Register;