Button when clicked does not call the callback function, ReactJS

Basically the problem is that when I click on the button nothing happens. If I change the code for the button from this

const Button =({text, callback}) =>(
    <Wrapper type="button" onclick={callback}>
        {text}
    </Wrapper>

);

to this

onst Button =({text, callback}) =>(
    <Wrapper type="button" onclick={callback}>
        {text}
    </Wrapper>

I get this error
Cannot update a component (Login) while rendering a different component (Button). To locate the bad setState() call inside Button,

Here is the code below
/LogIn.js

import React, {useState, useContext, useEffect} from "react";
import {useLocation, useNavigate} from 'react-router-dom'
import API from '../API';
//styles
import { Wrapper } from "./Header/Header.styles";
//Context
import { Content } from "./Header/Header.styles";
import Button from "./Button";
import { Context } from "../context";

const Login = () => {
    const[email, setEmail] = useState('');
    const[password, setPassword] = useState('');
    const[error, setError] = useState(false);

    const[user, setUser] = useContext(Context);
    const navigate = useNavigate();

    
    const handleSumbit = async () => {
        
        setError(false);
        try{
            
            const sessionID = await API.authenticate(
                email,
                password
            );
            console.log(sessionID);
            setUser({sessionID: sessionID.token,  email})
            navigate('/');
        }catch(error){
            setError(true);
        }
    };
    
    const handleInput = e => {
        const name = e.currentTarget.name;
        const value = e.currentTarget.value;
        if (name === 'email') setEmail(value);
        if(name === 'password') setPassword(value);
    };

    return(
        <Wrapper>
            <label>Email</label>
            <input
            type = 'email'
            value = {email}
            name = 'email'
            onChange={handleInput}
            />
            <label>Email</label>
            <input
            type = 'password'
            value = {password}
            name= 'password'
            onChange={handleInput}
            />
            <Button text = 'Login' callback = {handleSumbit} />
        </Wrapper>
    )
}

export default Login;

And here is the code for the Button

import React from "react";

import { Wrapper } from "./Button.styles";

const Button =({text, callback}) =>(
    <Wrapper type="button" onclick={callback}>
        {text}
    </Wrapper>

);

export default Button;