[SOLVED] React Moralis Sign up issue

I am facing problem when i click sign up button itโ€™s not authenticating
Here is my code

My Register.js

import React, {useState} from 'react'
// import Login from '../Components/Login'
import { useMoralis } from "react-moralis";
import Image from 'next/image'




const Signup = () => {
  const {signup, authenticate} = useMoralis()
  const [name, setName] = useState()
  const [password, setPassword] = useState()

  return (
    <form class="min-h-screen flex flex-col items-center justify-center align=items">
    <div class="md:flex md:items-center mb-6">
      <div class="md:w-1/3">
        <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
          Full Name
        </label>
      </div>
      <div class="md:w-2/3">
        <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe" 
          value={name} 
          onChange={(e) => setName(e.target.value)}
        />
      </div>
    </div>
    <div class="md:flex md:items-center mb-6">
      <div class="md:w-1/3">
        <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-password">
          Password
        </label>
      </div>
      <div class="md:w-2/3">
        <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-password" type="password" placeholder="******************"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
    </div>
   
    <div class="md:flex md:items-center">
      <div class="md:w-1/3"></div>
      <div class="md:w-2/3">
        <button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded lg:w-24" type="button" 
        onClick={() => signup(name,password)}
       >
          Sign Up
        </button>
      </div>
    </div>
  </form>
  )
  
}


const Register = () => {
  const {isAuthenticted} = useMoralis()

      if(!isAuthenticted) {
      return(
        <Signup />
      )
    }

  }


   

export default Register

Everytime when i click sign up it shows :
POST https://kugnxmm0wex1.usemoralis.com:2053/server/users 400

it looks like this is the error that is in server logs: error: Account already exists for this username.

how can i solve this
Here i am giving different names and different pass
image

You could use console.log to be sure that you send different username and password every time

Thank you for responding :relaxed:
my problem solved
after adding login component that issue resolved