Class Based TypeScript React.Component - Locale Switcher

LocaleSwitcher.tsx

import React from 'react';
import { useRouter } from 'next/router';

type Props = {
  locales: string[];
  currentLocale: string;
};

class LocaleSwitcher extends React.Component<Props> {
  private handleLocaleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newLocale = event.target.value;
    const { locales } = this.props;

    if (newLocale !== this.props.currentLocale && locales.includes(newLocale)) {
      const router = useRouter();
      router.push(router.pathname, router.asPath, { locale: newLocale });
    }
  };

  render() {
    const { locales, currentLocale } = this.props;

    return (
      <select value={currentLocale} onChange={this.handleLocaleChange}>
        {locales.map(locale => (
          <option key={locale} value={locale}>
            {locale.toUpperCase()}
          </option>
        ))}
      </select>
    );
  }
}

export default LocaleSwitcher;

LocaleSwitcherHook.tsx

import React, { Component } from 'react';
import Link from 'next/link';
import { withRouter, SingletonRouter } from 'next/router';

type Locale = {
  locale: string;
  label: string;
};

type Props = {
  locales: Locale[];
  router: SingletonRouter;
};

class LocaleMenu extends Component<Props> {
  render() {
    const { locales, router } = this.props;
    const { pathname, query } = router;

    return (
      <nav>
        <ul>
          {locales.map(locale => (
            <li key={locale.locale}>
              <Link href={{ pathname, query }} locale={locale.locale}>
                <a className={locale.locale === router.locale ? 'active' : ''}>{locale.label}</a>
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    );
  }
}

export default withRouter(LocaleMenu);