Next.js: Select element must have an accessible name: Element has no title attribute

Question

Next.js and Typescript beginner here. I'm rebuilding an app using Next.js but ran into trouble splitting pages and components with the error Select element must have an accessible name: Element has no title attributeMicrosoft Edge Toolsaxe/forms.

I'm basically trying to map out a list into a bunch of <options></options> in a React Component but <></> and <React.Fragment></React.Fragment> does not work. I looked into the documentation and found out I also need the <select></select> outside the mapped options. However the select is tied to a useState in the original page. Code below

Part of the page

<div>
    <label
        htmlFor="section"
        className={styles.sectionLabel}
    >
        Section:
    </label>
    <select
        id="section"
        required
        disabled={
            grade && strand ? false : true
        }
        onChange={(
            e: React.ChangeEvent<HTMLSelectElement>
        ) => {
            setSection(
                e.currentTarget.value
            );
        }}
        value={section}
    >
        <Map list={sectionList} />
    </select>
</div>

Map component

// errors on this line

interface ListProps {
    list: string[] | void;
}
const Map: React.FC<ListProps> = ({ list }) => {
    return (
        <>
            <option value="">Select Section</option>
            {list?.map((item: string, index: number) => {
                return (
                    <option key={index} value={item}>
                        {item}
                    </option>
                );
            })}
        </>
    );
};

export default Map;