Выделите текущий путь материала крошки пользовательского интерфейса

Question

В моем коде есть компонент breadcrumb, однако в настоящее время, когда я нажимаю, чтобы перейти на другую страницу, по умолчанию breadcrumb принимает значение «Сведения о контракте», очевидно, это связано с типографикой, которую я даю, однако я не совсем уверенкак я могу преобразовать свой код, чтобы выделить мой текущий путь.

например, если я нажму «Домой», я хочу, чтобы Дом был выделен, чтобы показать пользователю, где он находится, спасибо за ваше время

const styles = theme => ({
breadRoot: {
    justifyContent: 'center',
    flexWrap: 'wrap',
},
breadPaper: {
    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
},
});


const BreadCrumb = props => {
const { classes, authenticated } = props;
return (
    authenticated ? (
        <div className={classes.breadRoot}>
            <Paper className={classes.breadPaper}>
                <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />} aria-label="Breadcrumb">
                    <Link color="inherit" href="/">
                     Home
                    </Link>
                    <Link color="inherit" href="/contracts">
                     Contracts
                    </Link>
                    <Typography color="textPrimary">Contract Details</Typography>       
                </Breadcrumbs>
            </Paper>
        </div>
    ) : (
        <div/>
    )
);
};