Error Undefined when fetch data in a component in slug page in nextjs

I don't know if you will get it or not

I have [slug].jsx page and I show the article page that fetch the content in specific link.

Then I add a Sidebar.jsx Component inside the slug page in order to add articles suggestions

This is the code is SideBar.jsx

import { createClient } from 'contentful';
import SideBarCard from './Cards/SideBarCard'

export async function getStaticProps() {

  const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_KEY,
  })

  const res = await client.getEntries({ content_type: "news" })

  return {
    props: {
      articles: res.items,
    },
    revalidate: 1
  }
}


export default function SideBar({ articles }) {
  console.log(articles);
  return (
    <div className="">
      <div className="sideCard mb-2">
        إعلان
      </div>

      <div className="sideBar mb-2">
        <h2 className="text-white w-fit text-3xl mb-4 font-massir rounded-2xl border-light border p-2">أقرا المزيد</h2>

        <div className="sticky top-0 space-y-4">

          {articles.map((news, index) => index < 5 && (
            <SideBarCard key={news.sys.id} news={news} />
          ))}

        </div>
      </div>
    </div>
  )
}

But when I test it it gives me error Cannot read properties of undefined (reading 'map') at SideBar.

although the getStaticProps I copied from index.jsx the main page and it works fine.

How to fix this problem?