React NavLink: Capture dynamic Routes but onClick redirect to a specific route

Question

My NavLink Route looks as follows:

<NavLink
            key={element.id}
            to={element.uri || '/'}
            className={classes.NavBarElements}
            activeStyle={element.activeStyle || preDefinedActiveStyle}>
            {icon} <p className={classes.TagElement}>{element.label}</p>
          </NavLink>

Now element object looks like:

 config: {
    id: nanoid(),
    label: 'Connect & Mix',
    uri: '/config/metadata',
    action_id: 'level0__config',
    action_state: {},
  }

Now what I desire is that element.uri should have a route like this: /config/:configType where :configType can be anything from an array of strings (configTypesArray), but onClick to that tab it should move to the specific :configType which is the first element of configTypesArray. I am not sure on how to achieve the same.

routing array looks like below:

configTypesArray = ['metadata','datastream','nodatastream']

if user goes to any other route beyond what is listed, I am interested in showing a simple page with <div>Page Not Found</div>.

React Router version: "react-router-dom": "^5.2.0"