title: invalid hook call usedispatch in nextjs
body: <p>I keep getting this error but it's not clear why. It is a functional component and the hook is within the body. I tried searching around for an answer but it's not clear why it's having an issue.</p>
  <pre><code>import { useDispatch } from &quot;react-redux&quot;;
  import { selectItems } from &quot;../pages/slices/cartSlice&quot;;
  import { addToBasket } from &quot;../pages/slices/cartSlice&quot;;
  import ShoppingCartIcon from &quot;@mui/icons-material/ShoppingCart&quot;;
  import axios from &quot;axios&quot;;
  </code></pre>
  <p>code</p>
  <pre><code>export default function Products({ data }) {
    const dispatch = useDispatch();
    const [item, setItem] = useState({});
  
    const pushProducts = () =&gt; {
      setItem(data.data.products.data);
    }
  
    
  
    const items = useSelector(selectItems);
  
    
  
    const addCart = () =&gt; {
      const product = {
        description,
  
        quantity,
        price,
      };
      //send product to basket slice
      dispatch(addToBasket(product));
      
    };
  </code></pre>
  <p>This is the slice
  cartSlice</p>
  <pre><code>import { createSlice } from '@reduxjs/toolkit'
  
  const initialState = {
  items: [],
  };
  
  const cartSlice = createSlice({
    name: &quot;basket&quot;,
    initialState,
    reducers: {
        addToBasket: (state, action) =&gt; {
            state.items = [...state.items, action.payload] 
        },
        removeFromBasket: (state, action) =&gt; {},
  
    },
  });
  
  export const {addToBasket, removeFromBasket} = cartSlice.actions
  
  export const selectItems = (state) =&gt; state.basket.items;
  
  export default cartSlice.reducer
  </code></pre>