How to apply the same dynamic route to multiple pages - next.js

Question

I have a collection component that is mapped on the home page ('/') and on the illustrations page ('/illustrations'). This component handles different data that corresponds to different collections. On the illustrations page, I have a dynamic route [collectionId].js which maps the images that correspond to the specific collection. When I'm on the /illustrations route and click one of the collections, the corresponding images are correctly mapped to the page. However, when I am on the / route and click the collection, the application breaks, and I am presented with the following error I need to be able to have the correct images mapped when the user clicks the "collection" component on the home page.
Collection Component:
export default function Collection({title, description, collection, id }) {
return (
<Link href={`/illustrations/${id}`}>
<div className='border rounded-sm border-[#222222] p-12 mv:px-6 md:px-12 outline-zinc-400 flex flex-col justify-between items-start cursor-pointer hover:shadow-black transition-all ease-in 0.75s'>
<span className='flex items-center mb-4'>
<div className='w-0.75 h-5 bg-secondary'></div>
<p className='ml-2'>{title}</p>
</span>
<h3 className='text-3xl mb-4'>{collection}</h3>
<div className='flex flex-col items-start'>
<p className='mb-12 text-left'>{description}</p>
<ArrowLink title='Visit' />
</div>
</div>
</Link>
)
}
[collectionid.js]
export default function Collection() {
const router = useRouter()
const collectionID = router.query.collectionID
const collection = getCollectionById(collectionID)
// if (!collection) {
// alert('Page does not exist')
// }
return (
<div className='grid mv:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-24 gap-x-16 gap-y-52 place-items-center'>
{collection.imageData.map((image, index) => {
return (
<Link
href='#'
key={index}
className='relative cursor-pointer h-full flex items-center hover:border hover:border-[#DCDCDC] hover:shadow-lg ease-in duration-150'
>
<Image
src={image.image}
alt={`Vector ${image.alt} illustration`}
/>
<p className='whitespace-nowrap text-center px-6 py-2 bg-white text-black border border-black absolute -bottom-24 left-1/2 transform -translate-x-1/2 -translate-y-1/2'>
Preview image
</p>
</Link>
)
})}
</div>
)
}