Why is my button function not being called?

Question

I have a function that is to be called when I click a button. The function code is:

const createGroup = async () => {
    const { data, error } = await supabase
        .from("chatgroups")
        .insert([
        { group_name: groupName, creator: user.email, description: groupDesc, accepted_members: user.email + " ", invited_members: ""}])
    
    if (error) {
        console.log(error)
    }
    else {
        
        
        router.push("/groups/" + String(data[0].group_id))
    }
}

I tested this function with a test button and it worked successfully, routing me to /groups/[number]:

<button type = "button" className = "bg-yellow-500 rounded px-12 py-2" onClick = {() => 
    {createGroup()}}>Insert test group</button>

However, when I tested the function in the button it is intended to be called upon click, instead of calling the function, it routes me to "/?":

{
            //create group mode
            createMode && (
                <div style={{ alignContent: 'center', overflow: 'hidden' }}>
                    <div class="input-focused">
                        <form>
                        <h1 className = "text-center font-bold">Create New Group</h1>
                            <h2>Group Name: </h2><input type = "text" id = "groupname" style = {{width: '70vw', maxWidth: '100%'}} placeholder = "Enter group name" value = {groupName} className = "border-2 border-blue-400 rounded px-3 py-2 " onChange = {(e) => setName(e.target.value)}/>
                            <h2>Group Description: </h2><textarea type = "text" id = "groupdesc" style = {{width: '70vw', maxWidth: '100%',marginBottom: '5px'}} placeholder = "Enter group description" value = {groupDesc} className = "border-2 border-blue-400 rounded px-3 py-2 " onChange = {(e) => setDesc(e.target.value)}/>
                            <div style = {{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
                                <button type = "cancel" className = "bg-red-500 rounded px-12 py-2" onClick = {() => {
                                    setMode(false)
                                }}>Cancel</button>
                                <button type = "submit" className = "bg-green-500 rounded px-12 py-2" onClick = {() => {
                                    createGroup()
                                }}>Submit</button> //this is the button to click
                            </div>
                        </form>
                       
                    </div>


                </div>
            )
        }

Again, the javascript function works 100% and I verified this with the test button. I am confused why the function is not being called when I click my Submit button. I have also tried putting my function call in the , but it still isn't being called. Even when I removed both the onSubmit and onClick, somehow the button is still redirecting to "/?", which I do not want. The Cancel button isn't doing this, so I'm confused what is causing this.