Bug - Tabs - Tabs are not working as expected when wrapped with <Form>

[gautamkrishnar]

Describe the problem
When Tabs are wrapped in Form it is triggering a submit event that reloads the entire screen instead of activating tabs.

How do you reproduce the problem?
Use the following code:

import "./styles.scss";
import { Form, Tabs, Tab, TabTitleText } from "@patternfly/react-core";
export default function App() {
  return (
    <div>
      <Form>
        <Tabs defaultActiveKey={0} aria-label="Tab">
          <Tab
            eventKey={0}
            title={<TabTitleText>Users</TabTitleText>}
            aria-label="Uncontrolled ref content - users"
          >
            Users
          </Tab>
          <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>
            Containers
          </Tab>
        </Tabs>
      </Form>
    </div>
  );
}

Demo: https://codesandbox.io/s/busy-wood-41o4f3?file=/src/App.tsx:0-580

Expected behavior
Tabs should work well with forms

Is this issue blocking you?
There is a workaround that works, which is moving it out of form.

Screenshots
n/a
What is your environment?

• OS: [e.g. iOS]: Mac OS 12.5.1 (21G83)
• Browser [e.g. chrome, safari]: Chrome Version 104.0.5112.101 (Official Build) (x86_64)
• Version [e.g. 22]: "@patternfly/react-core": "4.231.8"

What is your product and what release date are you targeting?
n/a

Any other information?
n/a

[mcarrano]

We will take a look at your PR. Thanks for jumping in on this!