getStaticPaths is not a function NextUI/NextJS

When attempting to use any NextUI components I am running into Type Error: getStaticPaths is not a function, this error ONLY appears when trying to use a NextUI component (Such as Buttons or Chips etc.)

This is the second time I have ran into this error, however the first fix I applied when the error first arrived is not working on fixing this error now with a separate component.

I have searched high and low but there is little answers online that directly relate to NextUI for this use case.

The correction that I did prior that worked with a seperate component was changing the start of the file from -

export default function Dashboardhome() {
}

to

const Dashboardhome = () => {

 code here
}

export default Dashboardhome;

however that solution is not mitigating the current same error.

This error again happens ONLY when using a NextUI component.

Dashboardhome.tsx (problem file)

                            <h2 className="font-[500] text-3xl">{dataResponse.map(profile = profile.scname)}</h2>
                            <div className="flex flex-row gap-3">
                                <Chip color="warning">CB Staff</Chip>
                                <Chip color="success">Premium</Chip>
                            </div>
                            <h2 className="font-[500] text-1xl">{dataResponse.map(profile => profile.bio)}</h2>    
                        </div>

I have also attempted moving the chips to be in their own component file and then importing them to the Dashboardhome.tsx

Cbstaff.tsx

const Cbstaff = () => {
  return (
    <div>
        <Chip color='warning'>CB Staff</Chip>
    </div>
  )
}

export default Cbstaff;

Premium.tsx

const Premiumchip = () => {
  return (
    <div>
        <Chip color='success'>Premium</Chip>
    </div>
  )
}

export default Premiumchip;

Dashboardhome.tsx (Problem File)

                        <div className="flex flex-col gap-3">
                            <h2 className="font-[500] text-3xl">{dataResponse.map(profile => profile.scname)}</h2>
                            <div className="flex flex-row gap-3">
                                <Cbstaff />
                                <Premiumchip />
                            </div>
                            <h2 className="font-[500] text-1xl">{dataResponse.map(profile => profile.bio)}</h2>    
                        </div>

Which also has not fixed the error.

The goal is to have both the chips display, I find it weird that when I was having this issue with buttons in a seperate file as mentioned the first solution worked but the same solution is failing to work in a different folder.

getStaticPathsonly exists in the old page router system, but it seems to me that you are using the app router system, thats the reason why it didnt work

take a look at the official documentation about the app and page router system: https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths