Next.js / i18next: Language Selector for url with #hash - reactjs

Question

I am using the following Languageselector in my next project:
import React, { useState } from 'react'
import i18n from '../src/services/i18n'
import Link from 'next/link'
import { useRouter } from 'next/router'
const LanguageSelector = (props) => {
const [language, setLanguage] = useState(i18n.language);
const router = useRouter()
const handleOnclick = (value) => {
router.push(router.asPath, router.asPath, { locale: value });
};
console.log(router);
return (
<>
<div className={props.className!==undefined&&props.className!==""? ('d-inline-block d-xl-none '+props.className):"d-inline-block d-xl-none "} >
<select onChange={(e)=>{handleOnclick(e.target.value)}} required defaultValue={router.locale}>
<option value='de'>Deutsch</option>
<option value='en'>Enligsh</option>
</select>
</div>
<div className="d-none d-xl-block">
{router.locale==="en"? <div><Link href={router.asPath} locale='de'>DE</Link></div> : <div>DE</div>}
<p>|</p>
{router.locale==="de"? <div><Link href={router.asPath} locale='en'>EN</Link></div> : <div>EN</div>}
</div>
</>
)
}
export default LanguageSelector
_app.js
This does work fine until the visitor is on an URL, that has a # parameter. The URL in browser bar still changes but the language stays the same. How can I change the language on URLs with hash?
EDIT: This is how I am using translation
import Layout from '../components/Layout'
import { appWithTranslation } from 'next-i18next';
import React, {useState, useEffect} from 'react';
import { useRouter } from 'next/router'
const app = ({Component, pageProps })=> {
const router = useRouter()
function updateSchnellzugriffe(value, mobileValue){
setSchnellzugriffe(value);
setMobileSchnellzugriffe(mobileValue);
}
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default appWithTranslation(app)
And this is an example of pageComponent
import React, {useEffect, useState} from 'react'
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const home = (props) => {
const { t } = useTranslation(['common','home']);
return (
<h1 >{t("home:headline")}</h1>
)
};
export async function getStaticProps({ locale }){
return {
props: {
...await serverSideTranslations(locale, ['common','home']),
},
}
}
export default home