Can't get LivePreview to work with website template

Hello everyone, i am having troubles to understand the live preview feature. I can see a preview but it doesn't update live. I am using the

template.

Is it a convention to use

beside

? Because the live preview is still showing the

file which doesn't have

.

This is my

:

'use client'

import React from 'react'

import { Page } from '../../../payload/payload-types'
import { Blocks } from '../../_components/Blocks'
import { Hero } from '../../_components/Hero'
import { useLivePreview } from '@payloadcms/live-preview-react'
export const PageClient:React.FC<{ page: Page | null | undefined }>= ({ page }) => {

  const { data } = useLivePreview({
    serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || '',
    depth: 2,
    initialData: page,
  })
  const { hero, layout } = data

  return (
    <React.Fragment>
        <h1> PREVIEW</h1>

      <Hero {...hero} />
      <Blocks
        blocks={layout}
        disableTopPadding={!hero || hero?.type === 'none' || hero?.type === 'lowImpact'}
      />
    </React.Fragment>
  )
}

:

export default buildConfig({
  admin: {
    livePreview:{
      url: "http://localhost:3000",
      collections: ['pages']
    },
  // ..
})

I forgot to import the page template from

to

and use it in the return value.. But it's werid is has to be a client component. This approach only works for static pages then.