the useform state cant stop from submitting and refreshing the page;

form.jsx
` import React from ‘react’
import {useFormState, useFormStatus} from ‘react-dom’
import Button from ‘./button’;

 const Form = ({formAction, initialState, className, children}) => {
 const handleSubmit = (e) => {
  e.preventDefault(); 
  return formAction();
 }
 const [state,action] = useFormState(handleSubmit, initialState);
 return (
  <form className={className} onSubmit={action}>
   {children}
  </form>
 )
}

export const SubmitFormButton = ({title, className}) => {
const {pending, data, method, action} = useFormStatus();
return (
    <button disabled={pending} className={className} type="submit">
      {title}
    </button>
  )
}

export default Form`

createName.jsx
`
import Form, { SubmitFormButton } from “@/app/components/ui/form”;
export const CreateNameForm = () => {
const [loading, setLoading] = useState(false);
const onSubmit = (values) => {
console.log(values);
};

return (


<Form formAction={onSubmit} initialState={initialFormState}>
<InputTextGlobal label={"Store Name"} id={"StoreName"} value=    {initialFormState.name} onChange={handleStoreNameInputChange} />                    
<div className="pt-6 space-x-2 flex gap-2 items-center justify-end w-full">
  <Button onClick={closeCreateForm} disabled={loading}>
    Cancel
  </Button>
   <SubmitFormButton title={"Continue"} />
  </div>
 </Form>)

}
`

Ive tried to create new variable function for onsubmit action to add event.preventDefault()

const handleSubmit = (e) => { e.preventDefault(); return formAction(); }

but it wont prevent the action to submit the form and refresh the page.