Unhandled Runtime Error
TypeError: _projectData__WEBPACK_IMPORTED_MODULE_3___default(...).map is not a function

Source
app\page.jsx (19:11) @ projectData

  17 | <div className="wrapper">
  18 |   <div className="project-list">
> 19 |     {projectData.map((project, index) => (
     |     ^
  20 |       <div
  21 |         className="project p-1"
  22 |         key={index}

page.jsx

"use client";

import React, { useState } from "react";
import "./styles.css";

import projectData from "./projectData";

export default function Home() {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleProjectHover = (image) => {
    setSelectedImage(image);
  };

  return (
    <main>
      <div className="wrapper">
        <div className="project-list">
          {projectData.map((project, index) => (
            <div
              className="project p-1"
              key={index}
              onMouseEnter={() => handleProjectHover(project.image)}
            >
              <div className="project-title">
                <h1>{project.name}</h1>
              </div>
            </div>
          ))}
        </div>
      </div>
      {selectedImage && (
        <div className="selected-image">
          <img src={selectedImage} alt="Selected Project" />
        </div>
      )}
    </main>
  );
}

Any ideas?