React: invalid hook call

My React application works fine until I was trying to use react-cart-components and add this line <Cart currency="CAD" />

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The funny thing is that this application works fine on my friend's computer and it can be successfully deployed on heroku, but it is not working on my computer. I have already checked my versions of react-dom and react-native and they are newest, and there is only one copy of React in my app, everything is fine. Any ideas?

import React, { useState, useEffect } from 'react';
import ToolBox from 'components/ToolBox';
import Product from 'components/Product';
import axios from 'axios';
import 'css/products.scss';
import { Cart, AddCartButton } from 'react-cart-components'

.........

const Products = () => {

.........

return (
    <div>
        <ToolBox  search={search} />
        <Cart currency="CAD" />
        <div className="products">
            <div className="columns is-multiline ">
                {
                    currentPage.map(pdct => {
                        return (
                            <div className="column is-2" key={pdct.productId}>
                                <Product product={pdct} />

                            </div>
                        )
                    })
                }
            </div>

        </div>
    </div>        
)

This is my friend's package.json

  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "concurrently": "^5.2.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.9.21",
    "node-sass": "^4.14.1",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "react-cart-components": "^2.1.0",
    "react-scripts": "^3.4.1",
    "redux": "^4.0.5",
    "twilio": "^3.47.0",
    "validator": "^13.1.1"

The following is mine

  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "concurrently": "^5.2.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "is-empty": "^1.2.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.9.21",
    "node-sass": "^4.14.1",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "react": "^16.13.1",
    "react-cart-components": "^2.1.0",
    "react-dom": "^16.13.1",
    "react-native": "^0.63.1",
    "react-redux": "^7.2.0",
    "react-scripts": "^3.4.1",
    "redux": "^4.0.5",
    "twilio": "^3.47.0",
    "uninstall": "0.0.0",
    "validator": "^13.1.1"
  }