Hey! I'm used to use nextjs but this time I don't understand what's wrong. I use a template from tailwind UI (spotlight, if you want to know).

I want to create dynamic route, based on two parameters, [company] and [step].jsx. Here is my structure file:
src/
directory/
[company]
[step].jsx
page.jsx

Inside the directory page, there is a page. It's a database. Once users click on one company inside the databse it redirects to page /directory/[company]/[step].jsx

My databse is in Contentful. So I connected everything.

But now that I want to test my dynamic page/route, it doesn't work. And I don't nuderstand what's wrong

Here is my code, with hardcoded path ( I go to this page http://localhost:3000/directory/test-company/1), but I have a 404:

import { fetchCompaniesWithSteps, fetchOnboardingStepData } from '@/lib/contentful/retrieveData';

export async function getStaticPaths() {
  // Fetch all companies and their onboarding steps from Contentful
  const companies = await fetchCompaniesWithSteps(); // Implement this based on your Contentful setup

  return {
    paths: [
      { params: { company: 'test-company', step: '1' } },
    ],
    fallback: false,
  };
}


export async function getStaticProps({ params }) {
  const { company } = params;

  // Fetch the specific onboarding step data for the given company and step number from Contentful
  const onboardingStepData = await fetchOnboardingStepData(company); // Implement based on your Contentful setup

  return {
    props: {
      onboardingStep: {
        title: "Test Title",
        description: "This is a test description.",
      },
    },
  };
}

export default function OnboardingStep({ onboardingStep }) {
  // Render your onboarding step using onboardingStep data

  return (
    <div>
      {/* {console.log(onboardingStep)} */}
      <h1>oui</h1>
      <p>oui</p>
      {/* Display the step image, etc. */}
    </div>
  );
}

What's wrong?