Hi folks, I'm trying to use dynamic pages in Next.js 13 with app router. This is my folder structure:

- app
  -shows
    - [slug]
      - page.tsx

On page.tsx I want to generateStaticParams, and use the slug to find elements in my database, this is what I have:

export async function generateStaticParams() {
    const data = await getData("shows")
    const shows = data.content
    return shows.map((show) => ({
        slug: show.slug,
    }))
}

export default async function ShowRoute({params}: {params: {slug: string}}) {
    const shows = await getShows(shows)
    const show = shows.find((show) => show.slug === params.slug )
    if (!show){
        notFound()
    }
    return (
        <section>
            <h1>Shows</h1>
            <h2>{show.slug}</h2>
        </section>
    )
}

The problem is I'm getting characters added to my slug, like this:
My%20show%20slug,
while I would like to have something like this:
My-show-slug
Any hints very welcomed!!!!