Im having an issue with a react component in my Next JS 13 project.

'use client'
import { Fragment, useState } from 'react';
import { apiConnect } from '../../lib/apiConnect';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper';
import 'swiper/css';

import Logos from './Logos';
import Testimonial from './Testimonial';

export default function ClientSlider() {
  const Data = apiConnect('client/random', null, null, true);
  const [id, setId] = useState(null);

  return (
    <>
      {Data ? (
        <>
                <Swiper …>
                  {Data.map((logo, index) => {
                    return (
                      <Fragment key={index}>
                        { id === null && logo.testimonialExcerpt ? setId(index) : null }
                        {logo.case_study ? (
                          <>
                            {logo.clientLogo ? (
                              <SwiperSlide …>
                            ) : null}
                          </>
                        ) : (
                          <>
                            {logo.clientLogo ? (
                              <SwiperSlide …>
                            ) : null}
                          </>
                        )}
                      </Fragment>
                    );
                  })}
                </Swiper>
            { id ? 
              <Testimonial … />
            : null }
        </>
      ) : null}
    </>
  );
}

The issue is the line {Data.map((logo, index) => {. I'm getting the error TypeError: Data.map is not a function. I've tried all sorts and I'm basically out of ideas. As this is an Array, I would also suggest this need to be a forEach and then once inside Map through. However, changing this to a forEach results in the same error, Data.forEach is not a function. I'm posting as I don't know if this is some quirk of Next I'm aware of?