Next.js - Passing props for dynamic router (App directory)

Question

I am building an application using Next.js and the new app directory. I created a high level object that contains all problems' objects, after user clicks on a problem, 2 things should happen:

• Segment dynamically changes to the desired location

• Page should dynamically render problem description and other content

Each problem has been created locally, exported as object. Currently I iterate through this object's keys and match it to the dynamic URL segment, and pass respective problem's info. Here is a code snippet of the current solution:

// High-level object containing all problems' objects
export const problems = {
  "two-sum": twoSum,
  "jump-game": jumpGame,
  "reverse-linked-list": reverseLinkedList,
  "search-a-2d-matrix": search2DMatrix,
  "valid-parentheses": validParentheses,
};

// React component that needs to pass in the correct problem 
// object (respective of the dynamic URL segment)
export default function SomeProblem({
  params,
}: {
  params: { problem: String };
}) {
  if (Object.keys(problems).includes(params.problem)) {
    return (
      <div className="h-screen bg-dark-gray-1">
       
          <ProblemDescription prop={problems[params.problem]} />
          <CodeEditor prop={problems[params.problem]} />
  
      </div>
    );
  }
}

Now I am asking myself if there is any solution that would solve this problem better than my current implementation.