Testing array with Next.js using catch all routes slug - next.js

Question

I am using Next.js and Typescript to create a page based on the URL. Using the Next.js catch all route ('[[...slug]]'), I would like to create the page based on how many objects the URL contains.
'/demo' would create a page with generic data
'/demo/category' would create a page with category-level data
'/demo/category/subcategory' would create a page with detailed data based on the subcategory
my file 'pages/demo/[[...slug]].tsx' contains the following
import { useRouter } from "next/router";
import { Fragment } from "react";
import DemoHeader from "../../components/layout/demoheader";
function DemoPage() {
const router = useRouter();
let arrayCount = 0;
let storyData = new Array();
storyData = router.query.slug;
arrayCount = storyData.length;
let tempType = "";
let tempBrand = "";
switch (arrayCount) {
case 0: {
tempType = "generictype";
tempBrand = "genericbrand";
break;
}
case 1:
tempType = storyData[0];
break;
case 2:
tempType = storyData[0];
tempBrand = storyData[1];
break;
}
/* if (!storyData) {
const storyType = "smallbusiness";
const storyBrand = "ountybank";
} else {
const storyType = storyData[0];
const storyBrand = storyData[1];
}
*/
const storyType = tempType;
const storyBrand = tempBrand;
return (
<Fragment>
<DemoHeader storybrand={storyBrand} storytype={storyType} />
<main className="container">
<div className="p-4 p-md-5 mb-4 rounded text-bg-dark">
...
</div>
</main>
</Fragment>
);
}
export default DemoPage;
The above will not work because I can't figure out a way to define storyData as an array, and then assign it to router.query.slug.
Originally, I tested storyData and it worked. However, when I passed those variables to compontents it appeared to redefine the variable to the default in an odd way.
What is the best way to look at the router.query.slug, and create two variables from the url that you can pass into components?
Thanks!