How to add href to a button in react material-ui stepper - reactjs

Question

I'm trying to redirect to a page when the user clicks on the "Book now" button at the end of a Stepper instead of displaying "Thank you for your interest". Can this be possible by adding an href="/booking" to a button at the last step? Or there is some other way by adding a function to handle this? Thank you in advance!
Here is the part of the code I'm referring to:
<React.Fragment>
{activeStep === steps.length ? (
<React.Fragment>
<Typography variant="h5" gutterBottom>
Thank you for your interest!
</Typography>
</React.Fragment>
) : (
<React.Fragment>
{this.getStepContent(activeStep)}
<div className={classes.buttons}>
{activeStep !== 0 && (
<Button onClick={this.handleBack} className={classes.button}>
Back
</Button>
)}
<Button
variant="contained"
color="primary"
onClick={this.handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Book Now' : 'Next'}
</Button>
</div>
</React.Fragment>
)}
</React.Fragment>

Answer 1

As mentioned in my comments, I'd give a solution based on the official docs code at: https://codesandbox.io/s/tnpyj?file=/demo.js
You can create a function like the one below to keep track of the activeStep.
const isLastStep = () => {
if (activeStep === steps.length) window.location.href = '\booking';
return false;
};
Now in your template you can call this function instead of manual checking of last step as below:
{isLastStep ? (
This is a dirty solution but doing it correctly as mentioned in the link above can make it look cleaner. I hope it helps.