Метод split приводит к ошибке в React приложении ( TypeError: this.state.layoutsList.imgpath is undefined )

Почему во втором h2 не получается применить метод split ?

Рузультат в первом h2 - это строка "/images/BTR.jpg;tank.jpg"

Рузультат во втором h2 - TypeError: this.state.layoutsList.imgpath is undefined

import React from 'react';
import axios from "axios";
import { Link } from "react-router-dom";
import PhotoGallery from "./Gallery"


export default class DioramaDetailPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      layoutsList: []
    };
  }

  refreshList = (props) => {
    console.log("refreshList start")
    axios
      .get("http://localhost:8000/api/dioramas/")
      .then(res => this.setState({ layoutsList: res.data[this.props.match.params.id-1] }))
      .catch(err => console.log(err));
  };

  UNSAFE_componentWillMount() {
    this.refreshList();
  }

  renderItems = () => {
    return (
      <div className="card-body">
        <div className="back-link">
          <Link to="/dioramas">Back</Link>
        </div>

        <h2 className="card-title">{this.state.layoutsList.imgpath}</h2>
        <h2 className="card-title">{this.state.layoutsList.imgpath.split(";")[0]}</h2>

        <img src={this.state.layoutsList.imgpath} className="img-list" alt={this.state.layoutsList.imgpath} />
        <PhotoGallery />
        <p className="card-text">{this.state.layoutsList.description}</p>
      </div>
    )
  };

  render() {
    return (
      <div>
        <div>
          {this.renderItems()}
        </div>
      </div>
    );
  }
}