unable to load new images - reactjs

Question

When I click on the "Load More" button, the images and starship names should change. But the names change, the images stay the same. How can I solve this problem?

There are 20 images in poster Images. The first 10 images should come when the page is first opened. When the "Load More" button is clicked, the last 10 images should be loaded.

import React, {
  Component
} from "react";
import "../styles/Films.css";

class Films extends Component {
  state = {
    data: [],
    movieDetailsOpen: false,
    movieSelected: "",
    index: 0,
    page: 1,
    isLoading: false,
  };

  posterImages = [
    "CR90-Corvette.png",
    "stardestroyer.png",
    "Sentinel-class-landing-craft.jpg",
    "Death-Star.png",
    "Millenium_Falcon.jpg",
    "Y-wing.png",
    "x-wing.png",
    "TIE-Advanced-x1.png",
    "executor.png",
    "rebel-transport.png",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300",
    "https://picsum.photos/200/300"
  ];


  async getFilms() {
    const {
      page
    } = this.state;
    let data = [];
    this.setState({
      data: [],
    });

    await fetch(`https://swapi.dev/api/starships/?page=${page}`)
      .then(async(res) => {
        let response = await res.json();
        const appendImages = response.results.map((item, i) => ({ ...item,
          image: this.posterImages[i]
        }));
        data = [...data, appendImages];
        console.log(data);

      })
      .catch((err) => {
        console.log(err);


      });

    data[0].map((res, index) => {
      this.setState({
        data: [...this.state.data, res]
      });
      return res;
    });
  }


  componentWillMount() {
    this.getFilms();
  }

  componentDidMount() {
    const {
      page
    } = this.state;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.page !== this.state.page) {
      this.getFilms();
    }
  }

  loadMore = () => {
    this.setState((prevState) => ({
      page: prevState.page + 1,
      index: prevState.index + 1,
    }));
  };
  render() {
    const {
      isLoading
    } = this.state;

    return ( <
      div className = "starships-wrapper" >
      <
      div className = "top"
      id = "top" >
      <
      img src = "./logo.png"
      alt = "logo" / >
      <
      /div> <
      div className = "bottom"
      id = "bottom" >
      <
      ul > {
        this.state.data.map((res, index) => {
          return ( <
            li key = {
              index
            }
            className = "ship-list"
            style = {
              {
                backgroundImage: `url(${res.image})`,
              }
            } >
            <
            div className = "name" > {
              res.name
            } < /div> < /
            li >
          );
        })
      } <
      /ul> < /
      div > <
      div className = "load-more" >
      <
      button onClick = {
        this.loadMore
      }
      className = "btn-grad"
      variant = "dark" > {
        isLoading ? "Loading..." : "Load More"
      } <
      /button> < /
      div > <
      /div>
    );
  }
}

export default Films;