Not sure what this error means...export 'default' (imported as 'addToCart') was not found in '../actions/cartActions' (possible exports: addToCart)

I am going through a tutorial to learn React, Python, Django, and Redux. I came up with this error and not sure what to do: export 'default' (imported as 'addToCart') was not found in '../actions/cartActions' (possible exports: addToCart). I do understand useHistory has been decpreciated but am not sure how to change it. So far I have struggled to figure out this error.

CartScreen.js

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  Row,
  Col,
  ListGroup,
  Form,
  Image,
  Button,
  Card,
} from "react-bootstrap";
import Message from "../components/Message";
import addToCart from "../actions/cartActions";
 
function CartScreen({ match, location, history }) {
  const productId = match.params.id;
  const qty = location.search ? Number(location.search.split("=")[1]) : 1;
 
  const dispatch = useDispatch();
 
  const cart = useSelector((state) => state.cart);
  const { cartItems } = cart;
 
  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty));
    }
  }, [dispatch, productId, qty]);
 
  return (
    <Row>
      <Col md={8}>
        <h1>Shopping Cart</h1>
        {cartItems.length === 0 ? (
          <Message variant="info">
            Your cart is empty <Link to="/"> Go Back</Link>
          </Message>
        ) : (
          <ListGroup variant="flush">
            {cartItems.map((item) => {
              <ListGroup.Item key={item.product}>
                <Row>
                  <Col md={2}>
                    <Image src={item.Image} alt={item.name} fluid rounded />
                  </Col>
                  <Col md={3}>
                    <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>
                  <Col md={2}>${item.price}</Col>
                </Row>
              </ListGroup.Item>;
            })}
          </ListGroup>
        )}
      </Col>
      <Col md={4}></Col>
    </Row>
  );
}
 
export default CartScreen;

cartActions.js

import axios from 'axios'
import {CART_ADD_ITEM } from '../constants/cartConstants'

export const addToCart = (id, qty) => async (dispatch,getState) =>{
    const {data} = await axios.get(`/api/products/${id}`)

    dispatch({
        type:CART_ADD_ITEM,
        payload:{
            product:data._id,
            name:data.name,
            image:data.image,
            price:data.price,
            countInStock:data.countInStock,
            qty
        }
    })

    localStorage.setItem('cartItems',JSON.stringify(getState().cart.cartItems))
}

App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router,Routes,  Route } from 'react-router-dom'

import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import CartScreen from './screens/CartScreen';

function App() {
  return (
  <Router>
    <Header />
    <main className="py-3">
      <Container>
      <Routes>
          <Route path="/" element={<HomeScreen />} exact />
            <Route path="/product/:id" element={<ProductScreen />} />
            <Route path='/cart' element={<CartScreen />} />
            <Route path='/cart/:id' element={<CartScreen />} />
          </Routes>
       </Container>
     </main>
     <Footer/>
     </Router>
  );
}

export default App;