I am a beginner in JavaScript technology, I have a question about how to go through an object resulting from a GET. This my code

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'
}

I need to fill a Select ("react-select") with this data the structure that the Select needs in its options property is something like this

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

but as I told you I don't know how to go through GET object to get this back, I was using a traditional HTML <select> before and I filled it in the following way in

<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>

now to the react-select I must pass an object in the options property as follows

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