Im working on a project and only started recently with React.So far i made card component that is dynamically rendering data from js-file with a mapped function.One of the data being rendered are (stored in array) images where im displaying the first img and setting up a onClick function that opens the modal.

And this is where i'm stuck.Modal opens with non targeted img, where i would like to display the clicked image in modal first and pass the rest of the images of that array that can be clicked through.Like a image slider.When i console.log the images i can see im getting all the arrays in modal but i don't know how to set them accordingly.

I would appreciate some input how to go about the problem and what i am doing wrong.

I have a parent component which is receiving the data from js-file.

class Room extends Component{
  constructor(){
    super();
    this.state = {
      data: roomData,
    }
  }

    render(){
      return (
        <>
          <div>helo from room page</div>
          <RoomCards  data={this.state.data} />
        </>
        
      );
    }
}

this is the card Component

import Modal from "../components/modal";



class RoomCards extends Component{
constructor(){
  super();

  this.state = {
    showModal: false,
  
  };

}

getModal = ()=> {
  this.setState({ showModal: true })
}
hideModal = () => {
  this.setState({ showModal: false });
} 


render(){
  return (
    <>
      {
        this.props.data.map((data) => {
          return <div className="card__container" key={data.id} >
                    <div className="card">
                      <h2 className="card__title">{data.name}</h2>
                        <p className="card__description">{data.paragraph}</p>
                          <ul><li>{data.list[0]}</li></ul>
                          <ul><li>{data.list[1]}</li></ul>
                          <ul><li>{data.list[2]}</li></ul>
                          <ul><li>{data.list[2]}</li></ul>

                          <div  className="card__img">
                          <img src={data.image} 
                          onClick={() => this.getModal(data)} 
                          alt="" />

                          <Modal 
                            show={this.state.showModal}
                            onHide={() => this.hideModal()}
                            image={data.image} />
                          </div>
                    </div>
                    <button className="card__btn">Bestill overnatting</button>
                  </div>
          })  
        }
    </>
    )
  }
}
export default RoomCards

the modal component

import React, { Component } from "react";
import  "../styles/Room.scss";

class Modal extends Component {
  constructor(){
  super();

  this.state = {
      index:0
  };
}


  next =() => { 
    if({index : this.state.index}){
      this.setState({index: this.state.index   1});
    }else {
      this.setState({index: this.state.index})
      console.log("heloo i am at index");
  }
}

  prev=()=>{
    if(this.state.index === 0 || this.state.index === -1) {
        console.log("hi")
      }else {
        this.setState({index :this.state.index - 1});
        }
    }



  render() {
    console.log(this.props.image)
    return (
      <React.Fragment>
        {this.props.show && (
          <div className="modal">
            <img alt="" src={this.props.image[this.state.index]} key={this.state.index} />
              {/* <img alt="" src={this.props.image[1]}/> */}
        
            <button onClick={this.props.onHide}>Close Modal</button>
            <button onClick={this.prev}>