How to resolve "A control must be associated with a text label" on a datalist's option? - reactjs

Question

Building a dropdown and referencing Bootstrap 5 docs' on Datalists it shows an example of:
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
Writing my component to handle drop downs I'm unsure how to resolve the ESLint error of:
A control must be associated with a text label
code:
import React from 'react'
import PropTypes from 'prop-types'
import { Field } from 'formik'
const Drop = ({ name, label, id, placeholder, options }) => {
return (
<div className="form-group mb-4">
<label htmlFor={name}>{label}:</label>
<Field
aria-label={`${name}-dropdown`}
name={name}
className="form-control"
list={id}
id={`${id}DropDown`}
placeholder={placeholder}
/>
<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} data-value={option.toString()} />
))}
</datalist>
</div>
)
}
Drop.propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
options: PropTypes.array.isRequired,
}
export default Drop
Research
React Informed eslint associated control error after adding "Text" as control component
A control must be associated with a text label
Label must have associated control
In my option how can I resolve the ESLint error?

Answer 1

I was able to resolve my issue by adding an aria-label to the option so this:
<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} data-value={option.toString()} />
))}
</datalist>
turned into:
<datalist id={id}>
{options.map((option, key) => (
<option key={key} value={option.toString()} aria-label={option.toString()} data-value={option.toString()} />
))}
</datalist>
after going through the docs and finding control-has-associated-label.