Данные не определены с помощью useSWR

Я пытаюсь использовать useSWR в своем приложении NEXT.JS. Во-первых, я сделал собственный хук, где я его использую:

import useSWR from "swr";

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

const fetcher = (url) => {
  fetch(url).then((res) => res.json());
};

export default function useSocialMedia() {
  const url = apiUrl + "/socialMedia";
  const { data, error } = useSWR(url, fetcher);
  console.info("data : ", data);

  return {
    socialMedia: data,
    loading: !error && !data,
    error: error,
  };
}

Затем я импортирую его в свой компонент:

import styles from "./styles/socialIcons.module.scss";
import useSocialMedia from "../../../utils/hooks/useSocialMedia";

export default function SocialIcons() {
  const { socialMedia, loading, error } = useSocialMedia();

  return (
    <div className = {styles.socialIcons}>
      {loading && <p>Loading...</p>}
      {error && <p>Loading failed : {error}</p>}
      {socialMedia && <p>Here will appear my social media list</p>}
    </div>
  );
}

В результате моего console.info в моем пользовательском хуке у меня всегда есть неопределенные данные, и поэтому мой компонент зависает при загрузке... Я не понимаю, что не так с моим кодом.