dispatch proplem Uncaught (in promise) TypeError: dispatch is not a function

the code in product.jsx
the proplem is i want to update data but it doesnt work and i get this message in console Uncaught (in promise) TypeError: dispatch is not a function

export default function Product() {
      const [user,setUser]=useState({});
      const location = useLocation();
      const productId = location.pathname.split("/")[2];
      const [pStats, setPStats] = useState([]);
    
      const product = useSelector((state) =>
        state.product.products.find((product) => product._id === productId)
      );
     const handleChange =(e)=>{
        const value=e.target.value;
        setUser({
            ...user,
           [e.target.name]:value
        });
          };
          console.log(user)
    
      const dispatch = useDispatch();
     
      const handleclick=(id)=>{
        updateProduct(id,dispatch,user)
        console.log(id)
      }
    
      useEffect(() => {
        updateProduct(dispatch);
      }, [dispatch]);
      
      
    
      const MONTHS = useMemo(
        () => [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Agu",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        []
      );
    
      useEffect(() => {
        const getStats = async () => {
          try {
            const res = await userRequest.get("order/income?pid=" + productId);
            const list = res.data.sort((a,b)=>{
                return a._id - b._id
            })
            list.map((item) =>
              setPStats((prev) => [
                ...prev,
                { name: MONTHS[item._id - 1], Sales: item.total },
              ])
            );
          } catch (err) {
            console.log(err);
          }
        };
        getStats();
      }, [productId, MONTHS]);
    
      return (
        <div className="product">
          <div className="productTitleContainer">
            <h1 className="productTitle">Product</h1>
            <Link to="/newproduct">
              <button className="productAddButton">Create</button>
            </Link>
          </div>
          <div className="productTop">
            <div className="productTopLeft">
              <Chart data={pStats} dataKey="Sales" title="Sales Performance" />
            </div>
            <div className="productTopRight">
              <div className="productInfoTop">
                <img src={product.img} alt="" className="productInfoImg" />
                <span className="productName">{product.title}</span>
              </div>
              <div className="productInfoBottom">
                <div className="productInfoItem">
                  <span className="productInfoKey">id:</span>
                  <span className="productInfoValue">{product._id}</span>
                </div>
                <div className="productInfoItem">
                  <span className="productInfoKey">sales:</span>
                  <span className="productInfoValue">5123</span>
                </div>
                <div className="productInfoItem">
                  <span className="productInfoKey">in stock:</span>
                  <span className="productInfoValue">{product.inStock}</span>
                </div>
              </div>
            </div>
          </div>
          <div className="productBottom">
            <form className="productForm">
              <div className="productFormLeft">
                <label>Product Name</label>
                <input type="text" placeholder={product.title} name="title" onChange={handleChange}/>
                <label>Product Description</label>
                <input type="text" placeholder={product.desc} name="desc" onChange={handleChange} />
                <label>Price</label>
                <input type="text" placeholder={product.price} name="price" onChange={handleChange} />
                <label>In Stock</label>
                <select name="inStock" id="idStock" onChange={handleChange}>
                  <option value="true">Yes</option>
                  <option value="false">No</option>
                </select>
              </div>
              <div className="productFormRight">
                <div className="productUpload">
                  <img src={product.img} alt="" className="productUploadImg" />
                  <label for="file">
                    <Publish />
                  </label>
                  <input type="file" id="file" style={{ display: "none" }} name="img" onChange={handleChange} />
                </div>
                <button className="productButton" onClick={(e)=>handleclick(product._id)}>Update</button>
              </div>
            </form>
          </div>
        </div>
      );
    }

code in apicalls (redux)

import {
  
  updateProductFailure,
  updateProductStart,
  updateProductSuccess,
  

} from "./productRedux";



export const updateProduct = async (id, product, dispatch) => {
  dispatch(updateProductStart());
  try {
    const res=await userRequest.patch(`/products/find/${id}`,product)
    
    dispatch(updateProductSuccess({ id, product }));
  } catch (err) {
    dispatch(updateProductFailure());
  }
};
}

code in product redux

export const productSlice = createSlice({
  name: "product",
  initialState: {
    products: [],
    isFetching: false,
    error: false,
  },
  reducers: {
 updateProductStart: (state) => {
      state.isFetching = true;
      state.error = false;
    },
    updateProductSuccess: (state, action) => {
      state.isFetching = false;
      state.products[
        state.products.findIndex((item) => item._id === action.payload.id)
      ] = action.payload.product;
    },
    updateProductFailure: (state) => {
      state.isFetching = false;
      state.error = true;
    },
}

i want to update my products by sending data from client to the api i think the proplem in the updateProductsucess function