Issue with updating preview in Next.js project using next-sanity package

[slug].js

import ErrorPage from 'next/error'
import { useRouter } from 'next/router'
import { groq } from 'next-sanity'

import { RenderSections } from '../components/RenderSections'
import { usePreviewSubscription } from '../lib/sanity'
import { getClient } from '../lib/sanity.server'

const PAGE_QUERY = groq`
*[_type == "page" && slug.current == $slug][0]{
    ...,
    content[]{
        ...,
        _type == "hero" => {
            ...,
            heroSlides[_type == "reference"] -> {
                ...,
            },
            "pageHeroSlides": *[_type == "page" && slug.current == $slug][0].content[_type == "hero"][0].heroSlides[_type == "pageSlide"] {
                ...,
                page -> {
                	...,
              	}
            }
        },
        _type == "aboutUs" => {
            aboutUsPage -> {
                slug,
            }
        },
        _type == "newsSection" => {
            featuredNews[]->{
              ...,
            },
            newsPage->{
                ...,
              },
        },
        _type == "transactionsSection" => {
            featuredTransactions[]->{
              ...,
              company->{
                ...,
              }
            },
            transactionsPage->{
                ...,
              },
        },
        _type == "slide" => {
            slides[] -> {
                ...,
            }
        },
    }
}
`

const Page = ({ data, preview }) => {
  const router = useRouter()

  if (!router.isFallback && !data.page?.slug?.current) {
    return <ErrorPage statusCode={404} />
  }

  const { data: { content = [] } = {} } = usePreviewSubscription(PAGE_QUERY, {
    params: { slug: data?.page?.slug?.current },
    initialData: data?.page,
    enabled: preview || router.query.preview !== null,
  })

  return <article>{content && <RenderSections sections={content} />}</article>
}

export const getStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  }
}

export const getStaticProps = async ({ params, preview = false }) => {
  const page = await getClient(preview).fetch(PAGE_QUERY, params)

  return {
    props: {
      preview,
      data: { page },
    },
  }
}

export default Page

deskStructure.js

import * as React from 'react'
import { MdSettings } from 'react-icons/md'

const SitePreview = ({ document }) => {
  if (!process.env.SANITY_STUDIO_PREVIEW_URL) {
    console.warn(
      'SANITY_STUDIO_PREVIEW_URL should be set for preview to work! Falling back to localhost:3000',
    )
  }

  let slug
  switch (document.displayed._type) {
    case 'page':
      slug = document.displayed.slug.current
      break
    case 'news':
      slug = `nyheter/${document.displayed.slug.current}`
      break
    case 'transaction':
      slug = `transaktioner/${document.displayed.slug.current}`
      break
    default:
      break
  }

  console.log(document, slug)

  return (
    <iframe
      title={document.displayed._id}
      src={`${
        process.env.SANITY_STUDIO_PREVIEW_URL ?? '<http://localhost:3000>'
      }/${slug}?preview`}
      style={{ width: '100%', height: '100%', border: 0 }}
    /&gt;
  )
}

export const getDefaultDocumentNode = () =&gt; {
  // Conditionally return a different configuration based on the schema type
  return S.document().views([
    S.view.form(),
    S.view.component(SitePreview).title('Preview'),
  ])
}

// pages/index.js

import Link from 'next/link'

import Layout from '../components/Layout'
import { filterDataToSingleItem } from '../components/methods'
import { RenderSections } from '../components/RenderSections'
import { usePreviewSubscription } from '../lib/sanity'
import { getClient } from '../lib/sanity.server'
import { PAGE_QUERY } from '../queries/page'
import { SETTINGS_QUERY } from '../queries/settings'

export const getStaticProps = async ({ preview = false }) => {
  const config = await getClient(preview).fetch(SETTINGS_QUERY)

  const queryParams = { slug: config?.frontpage?.slug?.current }
  const data = await getClient(preview).fetch(PAGE_QUERY, queryParams)

  if (!data) return { notFound: true }

  const page = filterDataToSingleItem(data, preview)

  return {
    props: {
      preview,
      data: { page, query: PAGE_QUERY, queryParams },
      config,
    },
  }
}

const Home = ({ data, preview, config }) => {
  const { data: previewData } = usePreviewSubscription(data?.query, {
    params: data?.queryParams ?? {},
    initialData: data?.page,
    enabled: preview,
  })

  const { content = [] } = filterDataToSingleItem(previewData, preview)

  return (
    <Layout config={config}>
      {preview && <Link href="/api/exit-preview">Preview Mode Activated!</Link>}
      <article>{content && <RenderSections sections={content} />}</article>
    </Layout>
  )
}

export default Home

// pages/api/preview.js

export default function preview(req, res) {
  if (!req?.query?.secret) {
    return res.status(401).json({ message: 'No secret token' })
  }

  // Check the secret and next parameters
  // This secret should only be known to this API route and the CMS
  if (req.query.secret !== process.env.SANITY_PREVIEW_SECRET) {
    return res.status(401).json({ message: 'Invalid secret token' })
  }

  if (!req.query.slug) {
    return res.status(401).json({ message: 'No slug' })
  }

  // Enable Preview Mode by setting the cookies
  res.setPreviewData({})

  // Redirect to the path from the fetched post
  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
  res.writeHead(307, {
    Location: req.query.slug === '/' ? '/' : `/${req?.query?.slug}` ?? '/',
  })

  return res.end()
}

// pages/api/exit-preview.js

export default function exit(req, res) {
  res.clearPreviewData()

  res.writeHead(307, { Location: req?.query?.slug ?? '/' })
}

// utils/resolveProductionUrl.js (studio)

export default function resolveProductionUrl(doc) {
  const baseUrl =
    process.env.SANITY_STUDIO_PREVIEW_URL || '<http://localhost:3000>'

  const previewUrl = new URL(baseUrl)

  previewUrl.pathname = '/api/preview'
  previewUrl.searchParams.append(
    'secret',
    process.env.SANITY_STUDIO_PREVIEW_SECRET,
  )

  const slug = doc?.slug?.current === 'home' ? '/' : doc?.slug?.current

  previewUrl.searchParams.append('slug', slug ?? '/')

  return previewUrl.toString()
}

export default async function exit(_, res) {
  // Exit the current user from "Preview Mode". This function accepts no args.
  res.clearPreviewData()

  // Redirect the user back to the index page.
  res.writeHead(307, { Location: '/' })
  res.end()
}

"dependencies": {
    "next": "11.1.2",
    "next-sanity": "^0.4.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }

 <Link href="/api/exit-preview">
   <button
     as="a">
     Exit Preview
   </button>
 </Link>

  "dependencies": {
    "next": "latest",
    "next-sanity": "^0.4.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  }

next: "10.2.3" (from node modules)