[Solved] TypeError: Object(…) is not a function “React JS problem Facing While using a function”

High Rated Mughal Asks: TypeError: Object(…) is not a function “React JS problem Facing While using a function”
it has been almost 2 to 3 days trying to sought out this error but Don’t know why im unable to resolve this error. :( this is my first React project help me to get out of it Tried almost every way to resolve this error Used function Home (props) export default Home; Here is my code please Help me. your Help will be greatly appreciated

Code:
    import React, { useState, useEffect, useDispatch } from 'react';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import "./carousel.css";
    // import axios from 'axios';
    import { useSelector } from 'react-redux';
    import { listProducts } from '../actions/productAction';
    
    
    
    export default function Home (props) {
    
        const productList = useSelector(state => state.productList);
        const { products, loading , error } = productList;
        const { dispatch } = useDispatch();
        useEffect(() => {
            dispatch(listProducts());
    
            return () => {
                //
            }
    
        }, [])
    
        return loading ? <div>loading...</div>:
        error ? <div>{error}</div>: 
        (
            <div id="myCarousel" className="carousel slide" data-ride="carousel">
                <ol className="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <div className="carousel-inner">
                    <div className="carousel-item active">
                        <img className="first-slide" src="/images/image1.jpg" alt="First slide" />
                        <div className="container">
                        </div>
                    </div>
                    <div className="carousel-item">
                        <img className="second-slide" src="/images/I2.jpg" alt="Second slide" />
                        <div className="container">
                        </div>
                    </div>
                    <div className="carousel-item">
                        <img className="third-slide" src="/images/I3.jpg" alt="third slide" />
                        <div className="container">
                        </div>
                    </div>
                    <a className="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span className="sr-only">Previous</span>
                    </a>
                    <a className="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                        <span className="carousel-control-next-icon" aria-hidden="true"></span>
                        <span className="sr-only">Next</span>
                    </a>
                </div>
    
                
    
                <div className="container marketing">
                    {
                        products.map(product =>
                            <div className="row" key={product._id}>
                                <div className="col-lg-4">
                                    <div className="product">
                                        <img className="square-image" src={product.image} alt="{product.name}" width="140" height="140" />
                                        <h2>{product.name}</h2>
                                        <p>{product.description}</p>
                                        <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
                                    </div>
    
                                </div>
                            </div>)
                    }
    
                </div>
    
            </div>
    
    
        )
    }

PRODUCTACTION:-

Code:
import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from "../constants/productConstant";
import axios from 'axios';

const listProducts = () => async (dispatch) => {

    try {
        
        dispatch({ PRODUCT_LIST_REQUEST });
 
        const {data} = await axios.get ("/api/products");
        dispatch({type: PRODUCT_LIST_SUCCESS, payload : data});

        
    } catch (error) {
        
        dispatch({type: PRODUCT_LIST_FAIL, payload : error.message});
    }    
}

    export { listProducts }

Ten-tools.com may not be responsible for the answers or solutions given to any question asked by the users. All Answers or responses are user generated answers and we do not have proof of its validity or correctness. Please vote for the answer that helped you in order to help others find out which is the most helpful answer. Questions labeled as solved may be solved or may not be solved depending on the type of question and the date posted for some posts may be scheduled to be deleted periodically. Do not hesitate to share your response here to help other visitors like you. Thank you, Ten-tools.