useTranslation not working in storybook

This package doesn't seem to work for me. I get this error in storybook every time I launch. undefined is not an object (evaluating 'i18n.options.react').

i18n works as expected when starting my application normally, something seems to be wrong with this package.

My preview.ts file:

import "./storybook.css";
import "../styles/styles.scss";
import i18n from "../i18n/init";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  i18n,
  locale: "sv",
  locales: {
    sv: { title: "Svenska", right: "🇸🇪" },
    en: { title: "English", right: "🇬🇧" },
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

main.js

module.exports = {
  stories: ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-jest",
    "storybook-react-i18next",
    "storybook-addon-next",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
};

i18n init file

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { sv } from "./sv";
import Backend from "i18next-http-backend";

const i18n = i18next
  .use(Backend)
  .use(initReactI18next)
  .init({
    debug: true,
    lng: "sv",
    fallbackLng: "sv",
    interpolation: { escapeValue: false },
    supportedLngs: ["sv"],
    react: { useSuspense: false },
    resources: {
      sv: sv,
    },
  });

export default i18n;

stevensacks / storybook-react-i18next

useTranslation not working in storybook #12