How to create a custom data structure for quotes in Portable Text

// quote.js
export default {
  name: 'quote',
  type: 'object',
  title: 'Quote',
  fields: [
    {
      name: 'text',
      type: 'text', // <= This can also be a Portable Text field
      title: '',
    },
    {
      name: 'author',
      type: 'string', // <= This could be a reference to an author document type, if you had that
      title: 'Author',
    }
  ]
}

// portableText.js
export default {
  name: 'portableText',
  type: 'array',
  title: 'Portable Text',
  of: [
    {
      type: 'block',
    },
    {
      type: 'quote',
    }
  ]
}

// quote.js
export default {
  name: 'quote',
  type: 'object',
  title: 'Quote',
  fields: [
    {
      name: 'text',
      type: 'text', // <= This can also be a Portable Text field
      title: '',
    },
    {
      name: 'author',
      type: 'string', // <= This could be a reference to an author document type, if you had that
      title: 'Author',
    },
    {
      name: 'url',
      type: 'url',
      title: 'URL',
      description: 'Source on the web', 
     }
  ]
}

// portableText.js
const serializers = {
  type: {
    quote: ({ text, author, url }) => {
      return (
        <figure>
          <blockquote cite={url}>
            {text}
          </blockquote>
          {author && <figcaption>{author}</figcaption>}
        </figure>
      )
    }
  }
}

<blockquote>{text} test</blockquote>

<BlockContent serializers={serializers} />

// portableText.js
const serializers = {
  type: {
    quote: ({node: { text, author, url }}) => {
      return (
        <figure>
          <blockquote cite={url}>
            {text}
          </blockquote>
          {author && <figcaption>{author}</figcaption>}
        </figure>
      )
    }
  }
}