change URL without rerender using window.history?

Question

What I want is (there are 3 buttons)

1. user clicks on any one of the button the first letter of URL must changed to uppercase
2. URL looks like, 'path/country= india, usa, australia'
3. expected URL, 'path/country= India, Usa, Australia'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = ['india','usa','australia']
    }

    let onTabChange = () => {
        window.history.replaceState(null,null,`${this.state.country.join(',')}`)
    }
    render() {
        return (
            <Switch>
                <Route path={`/India`} component={India} />
                <Route path={`/Usa`} component={Usa} />
                <Route path={`/Australia`} component={Australia} />
            </Switch>
        )}
    }
}