export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' [duplicate]

I am getting this error export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' on updating my react-router-dom to 6.2.1.

Here is my Main.jsx

export default function Main(props) {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}>
              <Switch>
                {routes.map((route, key) => (
                  <Route key={key} exact path={route.path}>
                    <route.Content />
                  </Route>
                ))}
              </Switch>
            </Paper>
          </Grid>
        </Grid>
        <Box pt={4}>
          <Copyright />
        </Box>
      </Container>
    </main>
  );
}

I have tried replacing the Switch with Routes but that breaks my frontend. What should I do?

Help would be much appreciated.

Thank you!

In version 6, Switch got replaced by Routes. Try this import {Routes} from 'react-router-dom';.