nextui: [BUG] - Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-2" for Input component with Label

Describe the bug

When I’m using the Input component with a label prop to display, I’m always getting a hydration error that the id for the label component (which renders automatically) on the server and client doesn’t match.

Upon debugging I find that the issue is related to the <label> element which is being handled via the React-Aria package of Adobe Spectrum Library. A possible solution could be to allow passing more label props (such as htmlFor, id, etc) in the Input component itself.

<Input
      clearable
      placeholder="Your Full Name"
      label="Name"
      width="300px"
      helperText={errors.name?.message}
      helperColor={errors.name ? 'error' : 'default'}   />

Currently I’m passing an id attribute in props for Input component. If id is not passed in props, then I get the error of htmlFor mismatch on server and client.

NextJS version: 13.0.3

Your Example Website or App

https://stackblitz.com/edit/nextjs-rlmewg?file=pages%2Findex.js

Steps to Reproduce the Bug or Issue

1. Install next-ui in your next.js project.
2. Use the Input component and pass a label prop to it.
3. Check the browser console for the error.

You can check here also - https://stackblitz.com/edit/nextjs-rlmewg?file=pages%2Findex.js

Expected behavior

The client and server id and other attribute htmlFor (or for) should remain same after hydration.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome