Show counter progress text in home page

// pages/index
import { Row, Col } from "antd";
import Head from "next/head";
import FullWidthImage from "../components/pages/FullWidthImage";
import RenderProgress from "../components/pages/RenderProgress";
import useNumbers from "../hooks/useNumbers";

const Home = () => {
  const { numbers } = useNumbers();
  console.log("numbers in home", numbers);

  return (
    <>
      <Head>
        <title>Modern Content Management System - CMS</title>
        <meta
          name="description"
          content="Read latest blog posts on various topics"
        />
      </Head>
      <div style={{ marginBottom: 50 }}></div>
      <FullWidthImage />

      <Row>
        <Col
          span={6}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress number={numbers.posts} name="Posts" />
        </Col>
        <Col
          span={6}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress number={numbers.categories} name="Categories" />
        </Col>
        <Col
          span={6}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress number={numbers.comments} name="Comments" />
        </Col>
        <Col
          span={6}
          style={{ marginTop: 100, textAlign: "center", fontSize: 20 }}
        >
          <RenderProgress number={numbers.users} name="Users" />
        </Col>
      </Row>
    </>
  );
};

export default Home;