How do I map values for custom thumbnails using react-responsive-carousel and react-image-magnifiers?

I'm currently trying to product viewer using react-responsive-carousel and react-image-magnifiers. It's based an example from https://github.com/AlexTechNoir/Next.js-e-commerce-online-store#nextjs-e-commerce-store. The problem that I can't seem to work out is how to map the custom thumbnails to display properly. When I hard code the array it works fine, however when I try to dynamically map all of the thumbnails are rendered in the same array(The slide images and magnifier is working fine.) I'm using Next js v10.0.4, Node v14.3.0 Here is my code:

ProductSlider.js

 import { Carousel } from 'react-responsive-carousel'
 import { SideBySideMagnifier } from 'react-image-magnifiers'
 import {  API_URL } from '../../utils/urls'
 import {fromImageToUrl} from '../../utils/urls'


 //Map Image Slider Function

 export default function ProductSlider({ product }) {
 const images = product.productImages




 const  renderCustomThumbs =() => {

   
  const siteUrl = API_URL
  const thumbList = images.map((product, index) => 
  <picture key={index}>
  <source data-srcSet={`${siteUrl}${product.url}`} type="image/jpg" />
    <img
      key={product._id}
      src= {`${siteUrl}${product.url}`}
      alt={product.alternativeText}
      height="70"
    />
    
  </picture>,
  )
  return [

  [thumbList]
  
 ] 

 }
   
 return (

 <Carousel
 showArrows={true}
 showStatus={true}
 showIndicators={false}
 showThumbs={true}
 autoPlay={false}
 transitionTime={500}
 swipeable={false}
 emulateTouch={true}
 renderThumbs={renderCustomThumbs}
 >

 {images.map((productImages, index) => (
  <div key ={index}>
  <SideBySideMagnifier 
      key={index}
      imageSrc={fromImageToUrl(productImages)} 
      alwaysInPlace={true}
      fillAvailableSpace={true}
      />
    </div>
  
  ))} 
    
  )
  

 </Carousel>

 )
 }

Here is the Hard Coded Version that works (I have tested it by inserting importing the data as well i.e. <source data-srcSet={${siteUrl}${product[0].url}} type="image/jpg" /> and it works):

 import { Carousel } from 'react-responsive-carousel'
 import { SideBySideMagnifier } from 'react-image-magnifiers'
 import "react-responsive-carousel/lib/styles/carousel.min.css";

 export default function ProductSlider() {


 const renderCustomThumbs = () => {

  return [
    <picture>
      <source data-srcSet="/img/products/0/01.jpg" type="image/jpg" />
      <img
        key="01"
        src="/img/products/0/01.jpg"
        alt="First Thumbnail"
        height="70"
      />
    </picture>,
    <picture>
      <source data-srcSet="/img/products/0/02.jpg" type="image/jpg" />
      <img
        key="02"
        src="/img/products/0/02.jpg"
        alt="Second Thumbnail"
        height="70"
      />
    </picture>,
    <picture>
      <source data-srcSet="/img/products/0/03.jpg" type="image/jpg" />
      <img
        key="03"
        src="/img/products/0/03.jpg"
        alt="Third Thumbnail"
        height="70"
      />
    </picture>,
  ]

  }

  return (
  <DivProductPage>
  <Carousel
  showArrows={false}
  showStatus={true}
  showIndicators={false}
  showThumbs={true}
  autoPlay={false}
  transitionTime={500}
  swipeable={false}
  emulateTouch={true}
  renderThumbs={renderCustomThumbs}
  >
  <div>
    <SideBySideMagnifier 
      imageSrc="/img/products/0/01.jpg" 
      imageAlt="First Slide" 
      alwaysInPlace={true}
      fillAvailableSpace={true}
    />
  </div>
  <div>
    <SideBySideMagnifier 
      imageSrc="/img/products/0/02.jpg"
      imageAlt="Second Slide" 
      alwaysInPlace={true}
      fillAvailableSpace={true}
    />
  </div>
  
      <div>
        <SideBySideMagnifier 
          imageSrc="/img/products/0/03.jpg" 
          imageAlt="Third Slide" 
          alwaysInPlace={true}
          fillAvailableSpace={true}
        />
      </div>
    )
    
  
  </Carousel>
  </DivProductPage>
  )
  }

This is what the DOM returns from the developer console [Returned Dom map not working as expected][1] This is how it should look: [Returned DOM from the hardcoded version][2]

Any Help you give me would be greatly appreciated, I'm stuck! [1]: https://i.stack.imgur.com/JwKtn.png [2]: https://i.stack.imgur.com/abEfA.png