setInterval using nextjs and hooks

I' m traying to implement a loading using nextjs and hooks. I have to do a fetch to check new info every 3 minutes and when thats appends I want to use a loading. I create a setLoading and it starts at false and inside a setIntervar pass to true, but I dont 'know why dosen 't work.. why? Thanks!

here is my code:

import React, { useState, useEffect } from "react";
import Context from "../../config/Context";
import { checkNewData } from "../../helper/index";

function Home() {

  const [contentLoading, setLoading] = useState(false);
  const data = context.events[0];

  useEffect(() => {
    setInterval(() => {
      if (data.live == false) {
        setLoading(true);
        checkNewData();
      }
      setLoading(false)
    }, 10000);

  return (
    <React.Fragment>
      {contentLoading ? <p>loading</p> : <p>no loading</p>
    </React.Fragment>
  );
}

export default Home;