I tried to update the loading state to false after fetching data from database. Is there anything I am missing?

The error occurred in the setLoading function inside useEffect.

    const SingleProduct = ({ productName }) => {
      const [product, setProduct] = useState([]);
      const [loading, setLoading] = useState(true);
    
      // The line of code helps to convert hyphenated text to a spaced out text for database reading.
      const convertedProductName = convertToDefaultProductName(productName);
    
      useEffect(() => {
        const getProduct = async () => {
          try {
            const result = await publicRequest.get(
              `products/find/${convertedProductName}`
            );
    
            setProduct(result.data);
            setLoading(false); // BIG BUG IN THIS LINE.
          } catch (err) {
            setLoading(false);
          }
        };
    
        getProduct();
      }, [productName]);
    
      console.log(product, loading);
      const reOrderedProduct = sortSimilarProduct(product);
    
      return (
        <Container loading={loading}>
          {loading ? (
            <CircularProgress size="8rem" />
          ) : (
            <SingleProductDetails
              productName={convertedProductName}
              productDetails={reOrderedProduct}
            />
          )}
        </Container>
      );
    };

Here is the parent component of the SingleProduct Component

import React from 'react';
import Navbar from '../components/Navbar/Navbar';
import PageTitle from '../components/PageTitle/PageTitle';
import SingleProduct from '../components/SingleProduct/SingleProduct';
import Footer from '../components/Footer/Footer';
import Announcement from "../components/Announcement/Announcement";
import { useParams } from 'react-router-dom';
import { splitAndSpace } from '../usefulFunc';


const Product = () => {
    const { productName } = useParams();
    
    return(
        <>
            <Announcement /> 
            <Navbar />
            <PageTitle title={splitAndSpace(productName, "-")} pageLocation={"Home | Shop | ... | " + productName} params={productName}/>
            <SingleProduct productName={productName}/>
            <Footer borderTop/>
        </>
    );
};

export default Product;