Cannot add an array of child elements

[daltonfury42]

I wanted to add an array of child elements, like this:

import React from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import styles from '../../../styles/slider.module.scss';

const Slide = (props) => {
  console.log('This is something tiny missing somehwere...');
  return <div>
    <img src={props.slide.imgSrc} alt={props.slide.imgAlt} />
    <h4>{props.slide.title}</h4>
    <p>{props.slide.subtitle}</p>
  </div>
};

const Slider = (props) => {
  const slides = props.slides.map((slide) => <Slide key={slide.imgSrc} slide={slide} />);
  console.log(slides);
  return (<AwesomeSlider className={styles['aws-btn']}>{slides}</AwesomeSlider>);
};

export default Slider;

Four slides are recognised, but they are coming as empty:

What could be causing this behaviour? Trying to debug, if I put it in a <div>, it gets rendered, nut not in the way it should be, of course:

return (<AwesomeSlider className={styles['aws-btn']}><div>{slides}</div></AwesomeSlider>);