我不明白为什么我提取的数据没有显示。当我通过console.log()检查时，数据正确提取，但是在我的JSX部分没有显示。代码看起来也很亮。有人知道这里出了什么问题吗？

import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";

export const ConcertLatest = () => {
const [concerts, setConcerts] = useState([]);

useEffect(() => {
const loadConcerts = async () => {
  const response = await axios.get("/data/concerts");

  const rawData = response.data;

  const filteredData = rawData.filter((concert) => {
    //let date = new Date(concert.datum);
    // let newestDate = new Date("2022-09-29");
    return concert.datum >= "2022-09-30";
  });

  setConcerts(filteredData);
};
loadConcerts();
}, []);

if (!concerts.length) {
return <p>Loading...</p>;
}
console.log(concerts); // getting full populated objects 
return (
<div>
  <h1>Newest concerts </h1>
  <div>
    <div className="card">
      <img src={concerts.image} style={{ width: 100 }} />
      <div className="card-text">
        <div>
          {concerts.map((concert) => {
            (<h1>{concert.name}</h1>), (<h2>{concert.datum}</h2>);
          })}
        </div>
      </div>
    </div>
  </div>
</div>
);
};