Still plugging away on my first NextJS app. Right now I'm trying to make my update form work, but everytime I type a character in the input box, the page refreshes and reloads. The form below is used as a component from another page.

```tsx
'use client'
import React, { useState } from 'react';
import { OrganizationSettings } from "@/services/dataHelper";
import { ManageTeamSettings } from "@/services/teamSettings";

export default async function TeamSettingsFormTemp({ organizationSettings }: { organizationSettings: OrganizationSettings }) {

const [teamOrganizationName, setTeamOrganizationName] = useState(organizationSettings.organizationAccountSettings?.teamName);

async function updateTeamSettings(formData: FormData) {
ManageTeamSettings(formData);
}

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
await updateTeamSettings(formData);
};

return (
#Unknown Channel
<form
name="teamSettingsForm"
id="teamSettingsForm"
className=""
onSubmit={handleSubmit}
>
<div className="grid grid-cols-12 gap-4 xxxxxl:gap-6">
<div className="col-span-12 lg:col-span-6">
<div className="box xxl:p-8 xxxl:p-10">
<h4 className="h4 bb-dashed mb-4 pb-4 md:mb-6 md:pb-6">
Account Settings
</h4>
<div className="mt-6 xl:mt-8 grid grid-cols-3 gap-4 xxxxxl:gap-6">
<div className="col-span-2 md:col-span-2">
<label
htmlFor="teamOrganizationName"
className="md:text-lg font-medium block mb-4">
Team/Organization Name
</label>
<input
type="text"
className="w-full text-sm bg-primary/5 dark:bg-bg3 border border-n30 dark:border-n500 rounded-3xl px-3 md:px-6 py-2 md:py-3"
id="teamOrganizationName"
name="teamOrganizationName"
placeholder="Team Name"
value = {teamOrganizationName}
required
onChange={(e) => {setTeamOrganizationName(e.target.value)}}
/>
</div>
</div>
</div>
</div>
<div className="col-span-12 lg:col-span-6">
</div>
<div className="col-start-3">
&nbsp;
</div>
<div className="col-start-2 col-end-5">
<button className="btn flex w-full justify-center" type="submit">
Save Settings
</button>
</div>
</div>
</form>
</>
)
}