Импорт массива изображений в виде эскиза в ReactJS

я пытаюсь отобразить массив с некоторой информацией и изображениями. Я попытался использовать карту, и все работает нормально, пока я не попытаюсь разместить изображение. Что я делаю неправильно?

Это мое портфолио.js

    import React from "react";
    import "../sass/Portfolio.scss";
    import { PortfolioList } from "./data/PortfolioList";

    let portfolio = PortfolioList.map((portfolio, key) => {
      return (
        <div className = "col-md-6 portfolio-item" key = {key}>
          <img src = {portfolio.image} alt = "Imagem do Portfolio" />
          <figcaption className = "portfolio-info">
            <h1 className = "portfolio-heading">{portfolio.description}</h1>
            <a href = {portfolio.button} target = "_blank" rel = "noopener noreferrer">
              Visitar
            </a>
          </figcaption>
        </div>
      );
    });

    const Portfolio = () => {
      return (
        <section id = "portfolio">
          <div className = "separator" />
          <div className = "container">
            <h1 className = "heading-sobre">Alguns dos meus trabalhos</h1>
            <div className = "row">{portfolio}</div>
          </div>
        </section>
      );
    };

export default Portfolio;

Затем я создал PortfolioList с моим массивом

import barberclube from "../../img/sites/barber-clube85.png";
export const PortfolioList = [
  {
    image: { barberclube },
    description: "Website em Wordpress para uma barbearia",
    button: "https://barbearia.clube85.com"
  },
  {
    image: "https://via.placeholder.com/380x250",
    description:
      "Lorem ipsum dolor amet sic culture and community sports competition.",
    button: "https://google.com"
  }
];

Я пробовал много вещей в своем портфолиоlist.js, например: 1. Смена изображения: на изображение: "../img/barber-club85.png" 2. передача {barberclub} в виде строки

И я уже не знаю, что делать.