NextJS, getStaticProps returns data but data in props but data not available in main function and on client browser

My getStaticProps function populates the caseStudies object with multiple elements and returns in the props. When I attempt to read the props to display them the caseStudies Object is empty. I cannot figure out what is the issue, any ideas?

Below is the code:

import React, { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/router';
import Footer from '../shared/components/footer/footer.component';
import Header from '../shared/components/header/header.component';
import { ContentfulService } from '../core/contentfulService';

export default function IndexPage({ id, caseStudies, preview }) {

    console.dir(caseStudies);
    //In browser this displays an empty Array

    const mid = Math.ceil(caseStudies.length / 2);
    const leftColCaseStudies = caseStudies.splice(0, mid);
    const rightColCaseStudies = caseStudies.splice(-mid);

    return (
        <div>
            <Header />
            <div>BODY</div>
            <Footer />
        </div>
    );
};

export async function getStaticProps({ preview = false }) {

    const service = new ContentfulService();
    const page = await service.fetchHomePageBySlug('homepage');
    const id = page.id;
    const caseStudies = page.cs;

    console.dir(caseStudies);
    //displays multiple caseStudies objects

    return {
        props: { id, caseStudies, preview }
    }
}

In addition, the browser is showing the following:

Warning: Did not expect server HTML to contain a <div> in <div>.
    at div
    at div
    at div
    at div
    at div
    at div
    at IndexPage (webpack-internal:///./pages/index.tsx:42:20)
    at div
    at LocomotiveScrollProvider (webpack-internal:///./node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:13:37)
    at LCApp (webpack-internal:///./pages/_app.tsx:55:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20746)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23395)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:820:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:944:27)