Soy un principiante en la tecnología de JavaScript, tengo una pregunta sobre cómo pasar por un objeto resultante de un GET. este es mi codigo

 import { useRouter } from 'next/router' import useSWR from 'swr' import { api } from '../lib/api' export const getProfiles = () => { const { query, isReady } = useRouter() const { data: response, error, mutate } = useSWR( isReady ? `/profile/?search=${query.search}&order=${query.order}&page=${query.pageNumber}` : null, api ) const profiles = response?.data?.map(profile => { return { ...profile, label: ProfilesLabelEnum[profile.name] } }) return { profiles, isLoading: !error && !response?.data, isError: !!error, mutate } } export enum ProfilesLabelEnum { SUP = 'Supervisor', WOR = 'Servidor', MOD = 'Moderador', ADM = 'Administrador' }

Necesito llenar un Select ("reaccionar-seleccionar") con estos datos, la estructura que necesita el Select en su propiedad de opciones es algo como esto

 const options = [ { value: "1", label: "Administrador" }, { value: "2", label: "Colaborador" }, { value: "3", label: "Supervidor" } ];

pero como le dije, no sé cómo pasar por el objeto GET para recuperar esto, estaba usando un HTML tradicional <select> antes y lo llené de la siguiente manera en

 <select required {...register('perfil')} id="perfil" name="perfil" placeholder={ isAddMode ? 'Selecione um Perfil' : row.profile.name } size="md" variant="outline" > {profiles?.map(items => ( <option key={items?.id} value={items?.id}> {items?.label} </option> ))} </select>

ahora al react-select debo pasar un objeto en la propiedad options de la siguiente manera

 <Select id="color" options={options} onChange={this.handleChange} onBlur={this.handleBlur} value={this.props.value} />