Hijacking of `id` attribute by a `div` generated by `react-select` prevents meeting requirements of WCAG for accessible `label` and `input` tags

I've noticed that the way react-select imposes an id of react-select-2-input on the input tag prevents the use of the preferred method for WCAG to handle labels and input fields for accessibility purposes (https://www.w3.org/WAI/tutorials/forms/labels/#associating-labels-explicitly).

The React code below:

import React from 'react';
import Select from 'react-select';

export class MyForm extends React.Component {
    return (
          <label htmlFor="expected-id-for-input">
            My label
          </label>
          <Select id="expected-id-for-input" />
    );
}

Results in HTML similar to this:

<label for="expected-id-for-input">
    My label
</label>
<div id="expected-id-for-input">
    <div class=" css-10uwl3j-control">
        <div class=" css-g1d714-ValueContainer">
            <div class="css-15wyxdu-Input">
                <div class="" style="display: inline-block;">
                    <input id="react-select-2-input" value="">
                </div>
            </div>
        </div>
    </div>
</div>

For compliance with WCAG, the id should be on the input, not the div, but this is not possible with react-select.

Start at the Select component entry point and trace how the supplied id prop is applied to the generated div and input. Reproduce the supplied React example and inspect the DOM; done means the label's expected id associates with the input rather than the wrapper without breaking select behavior.