Error: A required parameter (username) was not provided as a string in getStaticPaths

Nextjs, Directus and Algolia to build a drivers page where you can click on their profile and see their info. To see someones info the link would be http://localhost:3000/drivers/username - Nothing too fancy.
The issue I have is when I click a link I get Error: A required parameter (username) was not provided as a string in getStaticPaths
The username is a string, so i don't understand it. Any direction would be appreciated. Thanks.

let config = {
  headers: {
    "authorization": 'Bearer xxx'
  }
}

export async function getStaticPaths() {

  const username = await fetch(`https://xxx.directus.app/users`,config).then(res => res.json());

  const paths = [username.data].map((driver) => ({
    params: {
      username: driver.username
    },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {

  const results = await fetch(`https://xxx.directus.app/users/?fields=username&[username][_eq]=${params.username}`, config).then(res => res.json());
  return {
    props: {
      results
    },
  }
}

export default function Driver({ results }) {

  return (
    `<div>
      <h1>{results.data[0].username}</h1>
    </div>`
  )
}

Most likely here username.data is already an array so you don't need to convert it to array otherwise you'll get this as paths : [ { params: { username: undefined } } ] since [username.data] contains only one element which is username.data and this latter does not have a property username because it is an array so the returned username will be undefined.

const paths = username.data.map((driver) => ({
  params: {
    username: driver.username
  },
}))