Wrong keyboard focus order - a11y

Question

I have created an application in React.js with satisfying all WCGA accessible guidelines. But currently I'm facing some issues like

1. The keyboard focus always starts from first interactive element (back button) regardless of the caret/cursor position in the document.

To understand this issue, I am adding a portion of source code where the user can enter their first name and last name. I have also added a back button on the top left of the same page. Please find the code below:

<section >
  <button onClick={()=>this.goback()>Back</button>
</section>
<section >
        <form className="form-example">
            <fieldset>
                <legend>User Details:</legend>
                {this.state.errors && this.state.errors.length?  <section>
                    {this.state.errors}
                </section> : null}
                <section className='input-fields'>
                <label> First Name:
                <input
                    type="text"
                    aria-label='First Name'
                    id = 'name'
                    aria-required="true"
                    onChange={this.onchangeHandler}
                    value={this.state.firstName}
                    name="firstname"
                    />
                </label>
                <label> Last Name:
                <input
                    type="text"
                    aria-label='Last Name'
                    aria-required="true"
                    onChange={this.onchangeHandler}
                    id='lastName'
                    value={this.state.lastName}
                    name="lastName"
                    />
                </label>

                <button type="button" id='submit' onClick={()=>this.submitForm()}>Login</button>
            </section>

            </fieldset>
            </form>
    </section>

People with visual impairments can become disoriented when tabbing takes focus someplace unexpected, or when they cannot easily find the content surrounding an interactive element. This means when an user places the cursor at the "first name" field and presses the "tab" button, the focus is going to the back button (which is the first interactive element in the page), but it's expected to go to the "last name" field.

scenario - An html page contains multiple interactive elements. A user with some visual disabilities places the cursor in an element in the middle of the page, and presses tab key to move the focus to the very next element.

Issue - The focus is going to the top of the page (first interactive element).

Can anyone suggest a solution to fix this issue?