TypeScript Error {imported module XXX} is not a function in Next.js App Router

I am attempting to create a dynamic page using locally created data using React and Next.js in particular. Unfortunately, it is throwing an error.

My folder structure is like so:

app/ projects/ [project]/ page.tsx lib/ data.tsx

The data file goes along the lines of this (it's shortened, to give an example):

const projects = [ { id: "001", client: “Tom", summary: “A bit of a project summary", }, { id: "002", client: “Dick", summary: "A bit of a project summary", }, { id: "003", client: “Harry", summary: "A bit of a project summary", }, ]; export { projects };

and my page currently contains this:

import { projects } from "../../lib/data"; type Props = { params: { slug: string }; }; export default async function BlogPost({ params }: Props) { const project = await projects(params.slug); return ( <div> <h1>{project.client}</h1> <p>{project.summary}</p> </div> ); }

My problem is that projects() in page.tsx throws an error TypeError: {imported module ./react/src/app/lib/data.ts}.projects is not a function, so I get that projects is not a function, but how do I resolve this?

The code seems pretty similar to a bunch of examples I have seen around offering solutions for App Router, but I have not seen any mention or tackle this particular issue.