Не выводятся картинки в React

Первый компонент:

import React from "react";
import { useState, useEffect } from "react";
import Collection from "./Collection";
export default function MainContent() {
  const [collections, setCollections] = useState([]);
  useEffect(() => {
    fetch("https://63ac7d74da81ba97618624f4.mockapi.io/photos")
      .then((result) => result.json())
      .then((json) => {
        setCollections(json);
      })
      .catch((error) => {
        console.warn(error);
        alert("Ошибка при получении данных");
      });
  }, []);
  return (
    <div className="App">
      <h1>Моя коллекция фотографий</h1>
      <div className="top">
        <ul className="tags">
          <li className="active">Все</li>
          <li>Горы</li>
          <li>Море</li>
          <li>Архитектура</li>
          <li>Города</li>
        </ul>
        <input className="search-input" placeholder="Поиск по названию" />
      </div>
      <div className="content">
        {collections.map((obj) => (
          <Collection name={obj.name} photos={obj.photos} />
        ))}
      </div>
      <ul className="pagination">
        <li>1</li>
        <li className="active">2</li>
        <li>3</li>
      </ul>
    </div>
  );
}

Второй компонент:

import React from "react";
export default function Collection({ name, photos }) {
  return (
    <div className="collection">
      <img className="collection__big" src={[photos][0]} alt="Item" />
      <div className="collection__bottom">
        <img className="collection__mini" src={[photos][1]} alt="Item" />
        <img className="collection__mini" src={[photos][2]} alt="Item" />
        <img className="collection__mini" src={[photos][3]} alt="Item" />
      </div>
      <h4>{name}</h4>
    </div>
  );
}

Сама проблема: