I see the requested value in my console, but not on my page

Question

I'm kind of stuck at the moment. I see my value in my console, but I don't see it on my page. I am not sure how to fix it. I am new to this and not sure if it has something to do with with GET/POST method?

import "./styles.css";
import * as React from "react";

export default function Hi() {
  const matic = useMatic();

  return (
    <div>
      <h1>{matic}</h1>
    </div>
  );
}

function useMatic() {
  const [matic, setMatic] = React.useState([]);

  React.useEffect(() => {
    fetch(
      "https://api.coingecko.com/api/v3/simple/price?ids=matic-network&vs_currencies=usd",
      {
        method: "GET",
        headers: {
          "cache-control": "max-age=30,public,must-revalidate,s-maxage=60",
          "Content-Type": "application/json; charset=utf-8"
        }
      }
    )
      .then((response) => response.text())
      .then((response) => setMatic(response))
      .catch((error) => console.log("error", error));
  }, []);

  return matic;
}