Reaction-slick - Тип элемента недопустим: ожидается строка

Question

Я пытаюсь создать простой слайдер, но когда я map данных, в отличие от простого добавления html в слайдер, я получаю следующую ошибку:

Тип элементаНедопустимый: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: undefined.Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const WishAddImage = () => {
    const imgArray = [
        {
            src: 'https://www.reiss.com/media/product/653/024/20-1.jpg?format=jpeg&auto=webp&quality=85&width=250&height=287&fit=bounds'
        },
        {
            src: 'https://www.reiss.com/media/product/993/016/76-1.jpg?format=jpeg&auto=webp&quality=85&width=250&height=287&fit=bounds'
        }
    ];

    const sliderSettings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    const wishImage = <Slider {...sliderSettings}>{imgArray.map(img => `<div><img src='${img.src}' /></div>`)}</Slider>;

    // const wishImage = ( /* <-- this works as it should when html used */
    //     <Slider {...sliderSettings}>
    //         <div>
    //             <h1>1</h1>
    //         </div>
    //         <div>
    //             <h1>2</h1>
    //         </div>
    //     </Slider>
    // );
    return <div>{wishImage}</div>;
};

export default WishAddImage;

Я видел подобные вопросы, которые не относятся ко мне:

1. Uncaught Ошибка: инвариантное нарушение: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция, но получено: object
2. Uncaught Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов)
3. недопустимый тип элемента: ожидается строка (для встроенных компонентов)или класс / функция

Есть ли что-то очевидное, что я упускаю?

Я использую response & response-dom v 16.6.3

Answer 1

Удалить ваши кавычки символов в:

 const wishImage = <Slider {...sliderSettings}>{imgArray.map(img => <div><img src={img.src} /></div>)}</Slider>;