Конкатенация самой переменной

Всем привет. Работаю с формами в react и двумя библиотеками - react-hook-form и yup Yup помогает легко настраивать валидацию полей, но знать эти библиотечки для моего вопроса не нужно. Вопрос такой.

Есть некоторое количество селектов, сделанных с помощью material ui Селекты мапятся из стора.

   {createUserRoleStore.rolesQuantity.map((elem, index)=>{
                                        return(



                                                <TableRow key={elem.id}>
                                                    <TableCell>

                                                        <FormControl className='customSelect' variant="standard" fullWidth>

                                                            <InputLabel id="demo-simple-select-label">Выбрать роль</InputLabel>
                                                            <Select
                                                                {...register(`roleItem${index}`)}
                                                                labelId='roleItem'
                                                                id="roleItem"
                                                                value={createUserRoleStore.rolesQuantity[index].roleTitle}
                                                                label="roleItem"
                                                                onChange={(e)=>createUserRoleStore.handleChange(index, e.target.value)}
                                                                error={!!errors.roleItem}
                                                                helperText={errors?.roleItem?.message}
                                                            >
                                                                {createUserRoleStore.rolesList.map(elem=><MenuItem key={elem.id} value={elem.title}>{elem.title}</MenuItem>)}

                                                            </Select>
                                                        </FormControl>

                                                    </TableCell>
                                                </TableRow>

                                        )
                                    })}

Строчка error={!!errors.roleItem} отвечает за корректное отображение ошибок, которое прописывается отдельно. Опустим это.

Дело в том, что этих селектов может быть пять, а может быть десять, и для каждого селекта строчка {!!errors.roleItem} должна быть уникальной, т.е это должно выглядеть вот таким образом:

{!!errors.roleItem0}{!!errors.roleItem1}{!!errors.roleItem2}{!!errors.roleItem3}

и т.д. Но как это сделать - я не знаю. Как можно при передаче пропса в компонент при переборке его изменить?

{!!errors.roleItem[index]} не работает. Пробовал по всякому. Буду крайне признателен всем, кто ответит на мой вопрос.