In my React js Typescript project, I have tried to create a nested route like this.

Dashboard.tsx

   <Route path={`${path}/production-schedule`} >
       <Route render={() =><ProductionSchedule />} />
   </Route>

ProductionSchedule.tsx

   <Route path={"/:date"} render={() =><ProductionScheduleSingleDateView />} />
        <Paper
        square
        sx={{
          p: 2,
          display: 'flex',
          flexDirection: 'column',
          height: 106,
          padding: '16px 0px 18px 24px',
        }}
      >
            {/* Header section */}
            <HeaderStepper title="Production Schedule" steps={ [{ link: '/', name: "Main Page"}, {link: '/dashboard/production-schedule', name: "Production Schedule"} ]} />
        <Typography component="h2" variant="h6" style={{ marginTop: '22px' }}>
          Production schedule
        </Typography>

How can I make this route only match this if there is a path param, and not the entire route.