Meteor Reactjs Сова Карусель

Это мой основной компонент, который я рендерю av из базы данных mini mongo. Моя текущая проблема заключается в том, что я отправляю this.props.av в карусель, которую он не загружает. Я заметил, что реквизит становится видимым только после того, как компонент повторно отрисовывает себя. В displayAvCarousel, если я передам массив avCarouselList. Карусель будет работать без проблем. Но если я перехожу со статического массива на массив из бэкэнда, возникает проблема с загрузкой карусели. Я не уверен, в чем может быть проблема. Я думал, что данные не загружаются с подключенным компонентом. Какие-либо предложения. Спасибо

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Carousel } from 'react-responsive-carousel';
import AV from './AV';

class FullAVList extends Component {
  constructor(props) {
  }
  displayAvList() {
    let avList = this.props.av;

    return avList.map((av) => {
     return <AV key = {av._id} av = {av} />;
    });
  }
  // filter sponsored events
  displayAvCarousel(){

    const avCarouselList = [
      {
        id: 1,
        img: "./images/av-img-header.jpg",
        s: false,
      },
      {
        id: 2,
        img: "./images/av-img-header.jpg",
        s: true,
      },
    ];


    let avFilters = this.props.av.filter((av) => av.s == true);

    return this.props.av.map((av) => {
      return (
        <div>
          <img src = {av.img} />
        </div>
      );
    });
  }

  render() {
    return (
      <div>
        <Carousel showArrows = {true} legend = {false} showThumbs = {false} infiniteLoop = {true} swipeable = {true}>
          {this.displayAvCarousel}
        </Carousel>
        {this.displayAvList()}
      </div>
    );
  }
}

export default createContainer(() => {
  Meteor.subscribe('autoevents');

  return {
    av: AV.find({ av: true }, { sort: { createdAt: -1 } }).fetch(),
  };
}, FullAVList);