How to use SVG inside components in react-with-storybook template

[MikePrus]

I've spent a whole day trying to import SVG but didn't find a way how to do it. So, have anyone faced smth similar?

// Button.tsx

import React from "react";
import classNames from "classnames";

import { ReactComponent as ArrowRight } from "../../../assets/arrow-right.svg";

export interface ButtonProps extends React.HTMLProps<HTMLButtonElement>{
    variants: 'primary' | 'secondary' | 'alert' | 'disabled' | 'transparent',
}

const Button:React.FC<ButtonProps> = ({ children, variants, onClick}) => {

    const btnClasses = classNames('py-2.5 px-7 rounded-full md:py-4 md:px-8', {
            'bg-primary text-white': variants === 'primary',
            'bg-lightGreen text-primary': variants === 'secondary',
            'bg-red text-white': variants === 'alert',
            'bg-gray20 text-gray70': variants === 'disabled',
            'bg-transparent text-primary': variants === 'transparent',
        }
    );
    return (
        <button className={btnClasses} onClick={onClick}>
            {children}
            <ArrowRight/>
        </button>
    );
};

export default Button;

I'm receiving the next error msg:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

My .storybook/main.js file looks like this:

// main.js
module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)', '../stories/Patient/*.stories.@(ts|tsx|js|jsx)', '../stories/Admin/*.stories.@(ts|tsx|js|jsx)', '../assets/*.@(svg)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },
  ],
    // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
  typescript: {
    check: true, // type-check stories during Storybook build
  }
};

This is my tsdx.config.js:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const image = require('@rollup/plugin-image')

module.exports = {
  rollup(config, options) {
    config.plugins.push(
        postcss({
          plugins: [
            autoprefixer(),
            cssnano({
              preset: 'default',
            }),
          ],
          inject: false,
          // only write out CSS for the first bundle (avoids pointless extra files):
          extract: !!options.writeMeta,
        })
    );
    config.plugins.unshift(image());
    return config;
  },
};