Компонент React некорректно отображается

У меня есть компонент реакции, который захватывает URL-адреса изображений из службы. Я беру эти URL-адреса и просто создаю несколько элементов <img .../> для отображения изображений.

В каждой строке есть 1 список изображений. Это работает при начальной загрузке, но когда я начинаю удалять строки (это делается путем сращивания элемента из массива глобального состояния, обрабатываемого с помощью redux), строка удаляется правильно, но изображения не меняются. Кажется, что изображения каждой строки будут «просачиваться».

Вот скриншот:

Я думаю, мне нужно где-то принудительно выполнить повторный рендеринг, может быть, на родительском уровне?

Вот мой код контейнера:

class SourceMediaPreviewContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      source: {},
      media: [],
    };
  }
  async componentDidMount() {
    const { source: _source } = this.props;
    const { data } = (await this.getMedia({ source: _source })) || {};
    const { media = [], ...source } = data || {};
    this.setState({ source, media });
  }
  async getMedia({ source }) {
    return describeSourceMedia({ source });
  }
  render() {
    return (
      <div className = "asb-source-media-preview">
        {this.state.media.map((media, i) => (
          <img
            key = {media.url}
            className = "asb-source-media-preview__img"
            src = {media.media_url}
            alt = {media.title}
          />
        ))}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  // mediaSource: state.asb.mediaSource,
});

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      // ...mediaSourceOperations,
    },
    dispatch,
  );

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SourceMediaPreviewContainer);