Having a hard time figuring out what to set for value in Ion Select component

Ionic Framework
1

I’m using Ionic, React, and TypeScript.

So for an event called ExampleEvent there are different ticket tiers. We’ll call those Tier A, Tier B, Tier C.

Ultimately I want the user to be able to select how many tickets they want to purchase from whatever tier. One event might have three tiers, 2 tiers, really any tiers.

So I want an array that has key value pairs. Something like Tier A: 2, Tier C:1. This shows that the user has selected two tickets from Tier A and 1 ticket from Tier C.

So to the user they see a line that says “Tier A” followed by a dropdown of number of tickets, but the value there is the amount they have selected. I thought this would make sense:

interface TicketSelections {
    name: string;
    value: number
}

const [ticketSelections, setTicketSelections] = useState<TicketSelections[]>([])

const handleSelectChange = (nameoftier: string, value: string) => {
    console.log(nameoftier, value)

    setTicketSelections({...ticketSelections, [nameoftier]: value})

}

and in the jsx:

<IonList>
                                {tiers.map((tier, index) => {
                                    return (
                                        <IonItem>
                                            <IonLabel>{tier.name}</IonLabel>
                                            <IonSelect
                                            value={ticketSelections[tier.name]}
                                            onIonChange = {(e) =>handleSelectChange( tier.name, e.detail.value)}>
                                                <IonSelectOption value='0'>0</IonSelectOption>
                                                <IonSelectOption value='1'>1</IonSelectOption>
                                                <IonSelectOption value='2'>2</IonSelectOption>
                                                <IonSelectOption value='3'>3</IonSelectOption>
                                                <IonSelectOption value='4'>4</IonSelectOption>
                                                <IonSelectOption value='5'>5</IonSelectOption>
                                                <IonSelectOption value='6'>6</IonSelectOption>
                                                <IonSelectOption value='7'>7</IonSelectOption>
                                            </IonSelect>
                                        </IonItem>
                                    )
                                })}
                            </IonList>

the value should equal whatever the value is for that particular tier. So value={ticketSelections[tier.name]}

But I get an error under tier.name that says

Element implicitly has an ‘any’ type because index expression is not of type ‘number’.

Anyone with ideas of how to make this work for me? I know if I put ‘index’ in instead of tier.name the error goes away, but then no value shows either which isn’t helpful. Any help is appreciated.