How to fetch data from an external API for a custom component in Sanity.io.

{
      name: 'goToPage',
      title: 'Go to page',
      description: 'This will be the page you would like the users to go to.',
      type: 'string',
      options: { list: PAGE_TYPES }, //This is where I want the data to come from sanity rather than pre-defined.
    },

{
	title: 'Async List',
  name: 'asyncList',
  type: 'string',
  options: {
    list: [], // <-- list must be an empty array initially to avoid errors
    url: '', // <-- the url you want to fetch
		formatResponse: (data) => {} // <-- a function to transform the data to match the schema requirements: { title, value }
  }, 
	components: {
		input: AsyncListInput
	}
}

//input component
import {useState, useEffect} from 'react'

export const AsyncListInput = (props) => {
	const [listItems, setListItems] = useState([])
  const {schemaType, renderDefault} = props
  const {options} = schemaType
  const {url, formatResponse} = options

  useEffect(() => {
    const getListItems = () =>
      fetch(url)
        .then((res) => res.json())
        .then(formatResponse)
        .then(setListItems)

    getListItems()
  }, [url, formatResponse])

  return renderDefault({
    ...props,
    schemaType: {...schemaType, options: {...options, list: listItems}},
  })
}

//general usage
{
	name: 'catBreed',
	title: 'Cat Breed',
	type: 'asyncList',
	options: {
		url: '<https://catfact.ninja/breeds>', // <-- the url you want to fetch
    formatResponse: (json) => // <-- a function to transform the data to match the schema requirements
      json.data.map(({breed}) => ({
        title: breed,
        value: breed.toLowerCase().split(' ').join('-'),
      })),
		}
}