Question about the PeoplePicker and the HTML rendered

2-pronged question, but both about the HTML being rendered. I apologize if missing info, but I am new to React and these components.

We are building a SPFX web part to do correspondence tracking. I have one page where I need 2 peoplepickers on the page for different purposes.

When I try to validate the HTML rendered I get duplicate ID's on the <div id="people"> and <div id="pntp">, because of course have 2 pickers on the page.

The other thing I have noticed is that the label generated is not associated with the input control generated for the picker when using the options:

<PeoplePicker
                context={{
                  ...context,
                  absoluteUrl: context.pageContext.web.absoluteUrl,
                  msGraphClientFactory: context.msGraphClientFactory,
                  spHttpClient: context.spHttpClient,
                }}
                titleText={t('groups.selectOwner')}
                required={true}
                personSelectionLimit={1}
                groupName={""} // Leave this blank for no group
                showtooltip={true}
                principalTypes={[PrincipalType.User]}
                resolveDelay={1000}
                onChange={ownerSearchOnChange}
                defaultSelectedUsers={selectedUsers}
              />
        </div>

Both these items are going to trigger accessibility issues. Am I missing something?

On another note, the required=true does not seem to make the field mandatory if no user has been selected, but that's likely a subject for another post.

Start with the PeoplePicker component and inspect the rendered markup when two instances appear on one page. Validate the generated IDs and the label-to-input association with an accessibility checker; done means the reported duplicate-ID and labeling concerns are addressed.