Locale switcher has confusing behavior in dev

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [X] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [X] I have tried creating a repro with https://new.docusaurus.io.
- [X] I have read the console error message carefully (if applicable).

### Description

After I chose a language, the locale added to the url one by one. I assumed it to be replaced. For example, my locales is ['en', 'zh-Hant', 'zh-Hans'], the initial url is http://localhost:3000/docu/docs/intro, after I chose zh-Hant then chose zh-Hans, the url became http://localhost:3000/zh-Hans/zh-Hant/docu/docs/intro. And I found currentLocale is not updated.

### Reproducible demo

_No response_

### Steps to reproduce

1. start a new repo
2. npm install
3. npm run start
4. change language
5. the lang added one by one, making the url longer and longer

### Expected behavior

language url be replaced

### Actual behavior

language url added one by one

### Your environment

- Public source code:
- Public site URL:
- Docusaurus version used:2.3.1
- Environment name and version (e.g. Chrome 89, Node.js 16.4):node 16
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):macos newest

### Self-service

- [ ] I'd be willing to fix this bug myself.