Mapping multiple images from array in React

Question

Im Trying to showcase multiple images from an array , at this point it's only returning image and index 0 from the array that I have created. (The issue is on the otherOptions const).

Thanks in advance.

import React, {useEffect, useState} from 'react';
import BackButton from '../BackButton/BackButton.component';
import Footer from '../Footer/Footer.component';
import SubImages from '../SubImages/SubImages.component';
import "./IndividualProduct.styles.scss"
import { productImageArr } from '../../MockImages/individual';


const IndividualProduct = () => {
    const images = productImageArr;
    const [img, setImg] = useState(0);
    const otherOptions = images.map((image, index) => (<SubImages key={index} productImage={image}/>))
    const changeImage = () =>{
        img == images.length - 1 ? setImg(0) : setImg(img + 1)
    }

    useEffect(() =>{
        document.title = "View Product"
     }, []);


    return (
        <div className='individualProduct'>
             <BackButton/>
             <div className='mainImage' style={{backgroundImage: `url(${images[img]})`}}> </div>
            {otherOptions}
            <Footer/>
        </div>
    );
};

export default IndividualProduct;

Array that Im pulling data from

export const productImageArr = [
    "https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/b7d9211c-26e7-431a-ac24-b0540fb3c00f/air-force-1-07-shoe-rWtqPn.png",
    "https://assets.superbalistcdn.co.za/500x720/filters:quality(75):format(jpg)/2392019/original.jpg",
    "https://assets.superbalistcdn.co.za/500x720/filters:quality(75):format(jpg)/2392018/original.jpg",
    "https://assets.superbalistcdn.co.za/130x190/filters:quality(75):format(jpg)/2392020/original.jpg",
    "https://assets.superbalistcdn.co.za/500x720/filters:quality(75):format(jpg)/2392017/original.jpg",

]