"Cannot update a component" when calling changeLanguage()

I have a very basic <LanguageSwitch /> component that looks like this

import React from 'react';
import { useI18next } from 'gatsby-plugin-react-i18next';

export function LanguageSwitch() {
  const { languages, language, changeLanguage } = useI18next();
  return (
    <select
      onChange={(event) => changeLanguage(event.target.value)}
      value={language}
    >
      {languages.map((lang) => (
        <option key={lang} value={lang}>
          {lang}
        </option>
      ))}
    </select>
  );
}

When I now change the language on my website I get following message in my browser console:

index.js:2177 Warning: Cannot update a component (`LanguageSwitch`) while rendering a different component (`PageRenderer`). To locate the bad setState() call inside `PageRenderer`, follow the stack trace as described in https://fb.me/setstate-in-render
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:94)

[jimmyn]

Known to me 😅. This is due to the fact that i18next.changeLanguage is async. This line

[jimmyn]

Should be fixed in the latest version