I have a component card.js

import React from 'react'
import Imagehelper from './helper/Imagehelper'
import ProductCompare from './ProductCompare';


const isAuthenticated = true; 

 const Card = ({
    product,
    addtoCart = true,
    removefromCart = true
 }) => {
  const productTitle = product ? product.subbranch3 :'نام محصول'  
  const productdescription = product ? product.goodproperties :'توضیحات محصول'  
  const productPrice = product ? product.price :'قیمت محصول'    
  
  const addToCart = () => {
    if (isAuthenticated){
        console.log('محصول به سبد خرید اضافه شد')
    }else{
        console.log('لطفا وارد حساب کاربری خود شوید')
    }
  }

//   const getARedirect = redirect =>{
//     if (redirect){
//         return(
//             <redirect to="/cart" />
//         )
//     }
//   }

  const showAddToCart = addtoCart =>{
    return(
        addtoCart && (
        <button
        onClick={addToCart}
        className='btn btn-outline-success mt-2 mb-2'
        >
        افزودن به سبد خرید   
        </button> 
        )
    )
  }

  const showRemoveFromCart = removefromCart =>{
    return(
        removefromCart && (
            <button
            onClick={() => {
                console.log('محصول از سبد خرید حذف شد')
            }}
            className='btn btn-outline-danger mt-2 mb-2'
            >
            حذف از سبد خرید
            </button>
        )
    )
  }

  return (
    <div className='card text-white bg-dark border border-info' dir='rtl'>
        <div className='card-header lead'>{productTitle}</div>      
        <div className='card-body'>
            <Imagehelper product={product} />
            <p className='lead bg-success font-weight-normal text-wrap'>
                {productdescription}
            </p>
            <p className='btn btn-block btn-success rounded btn-sm px-4'>{productPrice}تومان</p>
            <div className='row'>
                <div className="col-12">
                    {showAddToCart(addtoCart)}                 
                </div>
                <div className="col-12">
                    {showRemoveFromCart(removefromCart)}
                </div>
                <div className="col-12">
                    <button 
                        className='btn btn-block btn-outline-info mt-2 mb-2' 
                        onClick={ () => ProductCompare(product) }
                        >
                        compare product
                    </button>
                </div>
            </div> 
        </div>
    </div>
  )
}


export default Card

in that i make a button that when you click it it will call another component ProcuctCompare and in ProductCompare i want to compare products with each other

import React , {useState, useEffect} from 'react'
import { getProductsAttribute } from './helper/Coreapicalls';
import Imagehelper from './helper/Imagehelper';


const ProductCompare = (product) => {    
        
    console.log('product is:', product)
    const [allproductsAttribute, setAllProductsAttribute]  = useState([])
    const [singleProductAttributes, setSingleProductAttributes] = useState([])
    const [error, setError] = useState(false)
    let productID = product['id']

    const loadAllProductAttribute = () => {
        getProductsAttribute()
        .then( (data) => {
            if (data.error){
                setError(data.error)
                console.log(data.error)
            }else{
                setAllProductsAttribute(data)
            }
    })}
   
    useEffect( () =>{
        loadAllProductAttribute()
    }, )

    console.log('product attributes are:', allproductsAttribute)
    console.log(error)

    const loadSingleProductAttributes = () => {
        setSingleProductAttributes(allproductsAttribute.filter( (pa) => pa['good'] === productID )) 
    }
    
    useEffect( () => {
        loadSingleProductAttributes()
    }, []) 

 return (
    <div className='row' dir='rtl'>
        <div className="col-3 mb-3">
            <div className="row">
                <Imagehelper product={product} />
            </div>
            <div className="row">
                {singleProductAttributes.map((value, index) =>{
                    return(
                    <div key={index} className='col-4 mb-4'>
                      <p className='text-white'>{value}</p>  
                    </div>
                    )
                })}            
            </div>    
        </div>    
    </div>
  )
}


export default ProductCompare

the problem is when i clicked compare product in card.js it throws an error “Invalid hook call” i think i obeyed all react hooks roles but i can not undrestand why react shows me that error

any help would be appriciated
thanks

looked react hooks call roles and think i obeyed them