title: React Hook "useNavigate" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
body: <pre><code>import { useNavigate} from  'react-router-dom';
  import React from 'react'
  import CustomButton from '../custom-button/custom-button.component';
  import './cart-dropdown.styles.scss';
  import CartItem from '../cart-item/cart-item.component';
  import {connect} from 'react-redux';
  import { selectCartItems } from '../../redux/cart/cart.selectors';
  import {createStructuredSelector} from 'reselect';
  
  const CartDropDown = ({cartItems }) =&gt; {
    return (
      &lt;div className=&quot;cart-dropdown&quot;&gt;
        &lt;div className=&quot;cart-items&quot;&gt;
          {cartItems.length
            ? cartItems.map(cartItem =&gt;&lt;CartItem key={cartItem.id} item={cartItem} /&gt;)
            : &lt;span className=&quot;empty-message&quot;&gt;Your cart is empty&lt;/span&gt;
          }
          &lt;CustomButton onClick{() =&gt; window.history.push('/checkout')}&gt;
            GO TO CHECKOUT
          &lt;/CustomButton&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  const mapStateToProps = createStructuredSelector({
    cartItems: selectCartItems
  })
  
  export default useNavigate(connect(mapStateToProps) (CartDropDown));
  </code></pre>