Issues with internal links and styling in Astro/Sanity set up

*[_type == "page" && slug == "what-is-veterinary-physiotherapy"]{
    ...,
    content[]{
        ...,
        markDefs[]{
            ...,
            _type == "internalLink" => {
                ...,
                _type == "reference" => {
                  ...,
                  reference[]->
                }
            }
        }
    }
}

_type == "internalLink" => {
                ...,
                _type == "reference" => {
                  ...,
                  reference[]->
                }
            }
// SHOULD BE 👇 (but you might want to change the way you join, but you will get the idea)
_type == "internalLink" => {
                ...,
               _type == "internalLink" => {..., "referencedDoc": @.reference-> },
            }

*[_type == "page" && slug == "PAGE-SLUG"]{
  ...,
  content[]{
    ...,
    markDefs[]{
        ...,
        _type == "internalLink" => {
            ...,
            "slug": @.reference->slug
        }
    }
  }
}

import { portableTextToHtml } from 'astro-sanity';
import { urlForImage } from './urlForImage';

const customComponents = {
    types: {
        image: ({ value }) => {
            ...stuff
        },
    },
    marks: {
        link: ({ value, children }) => {
            ...stuff
        },
    }
}

const components = {
  block: {
    // Ex. 1: customizing common block types
    h1: ({children}) => <h1>{children}</h1>, // add your styling to the h1 in this example

    // Ex. 2: rendering custom styles
    customHeading: ({children}) => (
      <h2>{children}</h2> // with your other custom styling if you have custom styles defined in your block content
    ),
  },
}