Importing data with React - why is this not working?

Question

Can anyone tell me why this is not working? I've scoured the resources I can find, and it all looks the same as the model I'm following, but the "import ProductData" statement does not seem to be working. If I set a breakpoint at the first line after the import, "ProductData" is undefined. I'm stumped.

Here is the code in the file named "ProductContext.js":

import { useState, createContext } from "react";
import ProductData from "../../Data/ProductData";

const ProductContext = createContext();

export const ProductProvider = ({children}) => {
    const [ProductList, setProductList] = useState(ProductData);

    return (
        <ProductContext.Provider
            value={ ProductList }
        >
            {children}
        </ProductContext.Provider>
    );
};

export default ProductContext;

And here is the code from my "ProductData.js" file:

const ProductData = [
    {
        "id": 1,
        "name": "item 1",
        "image": "1.jpg",
        "price": 9.99,
    },
    {
        "id": 2,
        "name": "item 2",
        "image": "2.jpg",
        "price": 199.99,
    },
    ...
];

export default ProductData;