En mi proyecto React js Typescript, he intentado crear una ruta anidada como esta.

Tablero.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>

¿Cómo puedo hacer que esta ruta solo coincida con esto si hay un parámetro de ruta y no toda la ruta?