Why form element reload the page even if e.preventDefault() is set?

I have a form this I copied from another component, but in this one, it reloads the page even if I set e.preventDefault() in submit function

this is the form field

 <form onSubmit={(e) => handleUpdatePerson(e)}>
                            <input
                              type='text'
                              className='form-control mb-4'
                              placeholder='Name'
                              aria-label='Name'
                              aria-describedby='addon-wrapping'
                              value={name}
                              onChange={(e) => setName(e.target.value)}
                            />
                            <input
                              type='text'
                              className='form-control mb-4'
                              placeholder='Date of Birth'
                              aria-label='Date of Birth'
                              aria-describedby='addon-wrapping'
                              value={dob}
                              onChange={(e) => setDob(e.target.value)}
                            />
                            <input
                              type='text'
                              className='form-control mb-4'
                              placeholder='Gender'
                              aria-label='Gender'
                              aria-describedby='addon-wrapping'
                              value={gender}
                              onChange={(e) => setGender(e.target.value)}
                            />

                            <button className='btn btn-primary w-100'>
                              Update
                            </button>

this is the function

 const handleUpdatePerson = (e) => {
   e.preventDefault();

   console.log('submit fired');
 };