Supabase signup with react state email and password

I am trying to implement the standard Supabase signup, using react-jsx, but keep getting the response:
"You must provide either an email or phone number and a password"
My code looks as follows:

  const [login, setLogin] = useState('')
  const [password, setPassword] = useState('')

  const signUpSubmitted = () => {
    supabase.auth
      .signUp({ login, password })
      .then((response) => {response.error ? alert(response.error.message) : setToken(response)})
      .catch((err) => { alert(err)})
  }

and the form:

<form id='sign-up'>
                <h3>Sign Up</h3>
                <label>Email:</label>
                <input 
                type='email' 
                value={login}
                onChange={(e) => setLogin(e.target.value)}
                />
                
                <label>Password:</label>
                <input 
                type='password'
                value={password}
                onChange={(e) => setPassword(e.target.value)} 
                />

                <input onClick={signUpSubmitted} type='submit'/>
            </form>

I assume the problem lies with me attempting to save the values in a state, before passing them to the database. I don't see why it should be a problem, they are both strings from what I understand, so maybe I'm way off.

According to the Supabase docs, you need to pass email instead of login.

const { data, error } = await supabase.auth.signUp({
  email: 'example@email.com',
  password: 'example-password',
})

I would also suggest a few other optimizations:

• Move your submit handler to the <form /> in order to support submitting the form with the Enter key.
• Add event.preventDefault() to your submit handler to prevent the default form browser redirection behavior.
• Change your submit input to a more semantic <button />.
• Link your labels and inputs together with htmlFor and id attributes for accessibility (just make sure they're unique ids).

Updated Component:

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [token, setToken] = useState();

const handleSubmit = (event) => {
  event.preventDefault();
  supabase.auth
    .signUp({ email, password })
    .then((response) => {
      response.error ? alert(response.error.message) : setToken(response)
    })
    .catch((err) => { alert(err) });
}

return (
  <form id="sign-up" onSubmit={handleSubmit}>
    <h3>Sign Up</h3>

    <label htmlFor="email">Email:</label>
    <input
      id="email"
      type="email" 
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
    
    <label htmlFor="password">Password:</label>
    <input
      id="password"
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
    />

    <button type="submit">Sign Up</button>
  </form>
);