how to query the first element of object array in react

Question

May be object array word is not appropriate I just say what I understand Let me explain what it the issue actually is I am getting product details from the API and here I am sharing the screenshot from the redux dev tools which explains my response

My Actual Question is When I do

{
  product.images &&
    product.images.map((item, i) => (
      <img
        className="item-thumb prod_img"
        key={i}
        src={item.url}
        alt={`${i} Slide`}
        onClick={() => {
          change_img()
        }}
        style={{ cursor: 'pointer' }}
      />
    ))
}

This works fine but why when I try to product.images[1].url this gives an error saying i don't understand who t is 1

I am actually clueless about what's wrong here when console.log the type of that it says object from there I come to the analogy object array correct me if I am wrong

here is my ProductDetail.js

import React, { useEffect, useState } from 'react'
import { change_img } from './main'
import { useParams } from 'react-router-dom'
import { getProductDetails } from '../../action/ProductAction'
import { useDispatch, useSelector } from 'react-redux'
import { Loading } from '../../components'
const ProductDetails = () => {
  const dispatch = useDispatch()
  let { id } = useParams()

  const { loading, error, product } = useSelector((state) => state.singleProduct)

  useEffect(() => {
    dispatch(getProductDetails(id))
  }, [])

  return (
    <>
      {loading ? (
        <Loading />
      ) : error ? (
        <> Error </>
      ) : product ? (
        <>
          {' '}
          <div>
            <div className="card">
              <div className="row no-gutters">
                <aside className="col-md-6">
                  <article className="gallery-wrap">
                    <div className="img-big-wrap">
                      <img
                        src={`${product ? product.images[1].url : null}`}
                        alt=""
                        id="main_img"
                        style={{ display: 'block', margin: '0px auto', cursor: 'pointer' }}
                      />
                    </div>
                    <div className="thumbs-wrap">
                      {product
                        ? product.images.map((item, i) => (
                            <img
                              className="item-thumb prod_img"
                              key={i}
                              src={item.url}
                              alt={`${i} Slide`}
                              onClick={() => {
                                change_img()
                              }}
                              style={{ cursor: 'pointer' }}
                            />
                          ))
                        : null}
                    </div>
                  </article>
                </aside>
                <main className="col-md-6 border-left">
                  <article className="content-body">
                    <h2 className="title">Product name</h2>

                    <div className="rating-wrap my-3">
                      <ul className="rating-stars">
                        <li style={{ width: '80%' }} className="stars-active">
                          <img src="../images/icons/stars-active.svg" alt="" />
                        </li>
                        <li>
                          <img src="../images/icons/starts-disable.svg" alt="" />
                        </li>
                      </ul>
                      <small className="label-rating text-muted">132 reviews</small>
                      <small className="label-rating text-success">
                        {' '}
                        <i className="fa fa-clipboard-check"></i> 154 orders{' '}
                      </small>
                    </div>

                    <div className="mb-3">
                      <var className="price h4">Price: $ 1233</var>
                    </div>

                    <p>
                      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque, natus recusandae. Fuga blanditiis alias ipsum ipsa
                      temporibus ullam, labore excepturi qui nam sunt!
                    </p>

                    <dl className="row">
                      <dt className="col-sm-3">Model#</dt>
                      <dd className="col-sm-9">Odsy-1000</dd>

                      <dt className="col-sm-3">Color</dt>
                      <dd className="col-sm-9">Brown</dd>

                      <dt className="col-sm-3">Delivery</dt>
                      <dd className="col-sm-9">Russia, USA, and Europe </dd>
                    </dl>

                    <hr />
                    <div className="row">
                      <div className="form-group col-md flex-grow-0">
                        <label>Quantity</label>
                        <div className="input-group mb-3 input-spinner">
                          <div className="input-group-prepend">
                            <button className="btn btn-light" type="button" id="button-plus">
                              {' '}
                              +{' '}
                            </button>
                          </div>
                          <input type="text" className="form-control" value="1" />
                          <div className="input-group-append">
                            <button className="btn btn-light" type="button" id="button-minus">
                              {' '}
                              &minus;{' '}
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button href="#" className="btn  btn-primary mx-2">
                      {' '}
                      Buy now{' '}
                    </button>
                    <button href="#" className="btn  btn-outline-primary ">
                      {' '}
                      <span className="text">Add to cart</span> <i className="fas fa-shopping-cart"></i>{' '}
                    </button>
                  </article>
                </main>
              </div>
            </div>
          </div>{' '}
        </>
      ) : null}
    </>
  )
}

export default ProductDetails