map안에 return 사용 거의 필수 아닌가요

 {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/detail/" + result[i]._id.toString()}>
          
            <h4>{a.title}</h4>
          </Link>
          <DetailLink />
          <p>{a.content}</p>
          <Link href={"/modify/" + result[i]._id.toString()}>
            <button>수정</button>
          </Link>
          <button
            onClick={(e) => {
              let idee = result[i]._id.toString();
              fetch("api/abc/" + idee)
                .then((r) => {
                  if (r.status == 200) {
                    return r.json();
                  } else {
                  }
                })
                .then((result) => {
                  e.target.parentElement.style.opacity = 0;
                  setTimeout(() => {
                    e.target.parentElement.style.display = "none";
                  }, 1000);
                  console.log(result);
                })
                .catch((error) => {
                  console.log(error);
                });
            }}
          >
            삭제
          </button>
        </div>
      ))}

위의 코드는 map의 콜백함수안 전체를 return으로 감싸지 않았는데도 잘 작동하는 이유가 궁금합니다.
html부분은 jsx 문법만 가능하기에 반복문으로 배열을 반환하는 map을 사용하는 거라고 하셨는데
return이 없으면 map은 반복만 할 뿐 배열을 반환하지는 않잖아요

{data.map((a, i) => {
        return (
          <div key={i}>
            <p>{a.content}</p>
            <p>{a.author}</p>
          </div>
        );
      })}
이 코드는 위의 코드와 달리 return으로 감싸지 않으면 웹페이지에 보이지 않습니다
이렇게 되는게 맞지 않나요?
참고로 둘다 클라이언트 컴포넌트안의 코드입니다.
차이점이 있다면 두번째 코드의 배열인 data는 ajax를 통해 가져온 배열이라는 점입니다.