I need help. I am trying to get data from Sanity by using serverSideProps, but it doesn't seem to work. I get undefined... Can someone tell me what I am doing wrong?

I tried as well coping example code from here :
https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

but that code didn't work either. I got undefined as well...

import sanityClient from '@/lib/api/sanityClient';

interface Props {
  wines: Wine[];
}

const WinePage = ({ wines }: Props) => {
  console.log('wines');
  console.log(wines);
  return (
    <div>
      <h1>Wine Page</h1>
      {/* <ul>
        {wines.map((wine, idx) => (
          <li key={idx}>{wine.name}</li>
        ))}
      </ul> */}
    </div>
  );
};

export default WinePage;

export const getServerSideProps = async () => {
  const wines = await sanityClient.fetch(`*[_type == "wine"]{name}`);
  return { props: { wines } };
};