Render React components conditionally using Hoc

I need to react spinner, if data not fetched and need to show Spinner, once gets gets fetched from sever, I need to show actual component, for this I want to use a cleaner, I found Hoc are more cleaner than than the if/else and conditional operators. I have implemented, but I need your suggestion, I am implementing it in a right way, or there is any better approach.

//Hoc this my Hoc

import Spinner from "components/Spinner";
import React from "react";
    function withLoading(Component) {
      return function EnhancedComponent({ isLoading, ...props }) {
        if (!isLoading) {
          console.log("Loading", isLoading);
          return <Component {...props} />;
        }
        return <Spinner />;
      };
    }
    export default withLoading;

//usage

import { useSelector } from "react-redux";
import StoreMenu from "./components";
import WithLoading from "components/Hoc/WithLoading";
const Menu = () => {
  const { menu } = useSelector((state) => state.menu);
  return (
    <React.Fragment>
      <StoreMenu menu={menu} />
    </React.Fragment>
  );
};
const Hoc = WithLoading(Menu);
const MenuContainer = () => {
  const { loading } = useSelector((state) => state.menu);
  return <Hoc isLoading={loading} />;
};
export default MenuContainer;