Lightgallery.js рендеринг с циклом в отдельной функции не работает

Question

Поэтому я работаю над проектом React js, в котором я извлекаю объект, содержащий несколько деталей, в том числе имя изображения (или, скорее, локальный путь) из базы данных MySql. Я пытаюсь использовать LightGallery.js для отображения нескольких изображений объекта внутри слайдера изображений, как например, lightgallery одно. Теперь проблема:

Если я использую жестко закодированные теги html в методе рендеринга (теперь закомментирован), галерея работает как шарм. Однако мне нужно будет визуализировать эти изображения динамически, так как я не могу контролировать, сколько изображений будет загружено на элемент. Я пытался написать функцию returnPics(), чтобы выдвинуть нужные теги и их детей (

Вот необходимый код:

import React, { Component } from "react";
import Layout from "../components/Layout";
import axios from "axios";
import { Container, Header } from "semantic-ui-react";
import "lightgallery.js";

class item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      title: "",
      category: "",
      description: "",
      owner: "",
      price: "",
      tags: [],
      pics: []
    };
  }

  async componentWillMount() {
    let thisObject;
    let pathname = window.location.pathname.split("/");
    let id = pathname[pathname.length - 1];

    let response = await axios.post(window.location.origin + "/item", { id });
    if (response.data.success) {
      thisObject = response.data.object;
      let picsTemp = [];

      for (let i = 0; i < response.data.pics.length; i++) {
        picsTemp.push(response.data.pics[i].name);
      }

      this.setState({
        id: response.data.id,
        title: thisObject[0].title,
        category: thisObject[0].category,
        description: thisObject[0].description,
        owner: thisObject[0].owner,
        price: thisObject[0].price,
        tags: response.data.tags,
        pics: picsTemp
      });
    }
  }

  returnPics = () => {
    let picsToReturn = [];

    for (let i = 0; i < this.state.pics.length; i++) {
      let source = "../static/" + this.state.pics[i];
      let key = "picObject" + i;
      let picKey = "pic" + i;
      let lgEvent = "&" + (i + 1);

      picsToReturn.push(
        <a key={key} href={source} lg-event-uid={lgEvent}>
          <img key={picKey} src={source} />
        </a>
      );
      console.log(picsToReturn);
    }
    return picsToReturn;
  };

  render() {
    return (
      <Layout>
        <Container textAlign="center">
          <Header size="huge">{this.state.title}</Header>

          <div id="lightgallery">
            {this.returnPics()}                               <------this doesn't

            {/* <a href="../static/Aere_adidas_f50.jpg">      <------this works
              <img src="../static/Aere_adidas_f50.jpg" />
            </a>
            <a href="../static/Aere_ps4.png">
              <img src="../static/Aere_ps4.png" />
            </a> */}


          </div>
          <script src="../node_modules/lightgallery.js/dist/js/lightgallery.min.js" />
        </Container>
        <script type="text/javascript">
          {lightGallery(document.getElementById("lightgallery"))};
        </script>
      </Layout>
    );
  }
}

export default item;

Кто-нибудь может понять, почему это может быть?

Спасибо за вашу помощь!