스토리북 에러 - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

리액트 컴포넌트 footer

import { ReactComponent as LogoFooter } from '../../../public/logos/logoFooter.svg';
import React from 'react';
import Link from 'next/link';

const Footer = () => {
  return (
    <footer
      className="flex flex-col bg-[#333] text-[#999] items-center justify-center
    pt-[35px] pr-[10px] pb-[45px] pl-[10px] self-end mt-auto w-[100%]"
    >
      <LogoFooter className="mb-[12px]" />
      <span>© 2023 · All Rights Reserved</span>
      <span>Team : 나누조, Team Leader : 김형진</span>
      <span>BE developers : 최지현, 박지윤, 김연주</span>
      <span>FE developers : 송현우, 박경현, 김은수, 김형진</span>
      <span className="text-center">
        <span>Github :</span>
        <Link
          className="break-all text-[#999999]"
          href="https://github.com/codestates-seb/seb41_main_024"
        >
          https://github.com/codestates-seb/seb41_main_024
        </Link>
      </span>
    </footer>
  );
};
export default Footer;

스토리북 파일

import React from 'react';
import { Story, Meta } from '@storybook/react';
import Footer from './Footer';

export default {
  title: 'Molecules/Footer',
  component: Footer,
} as Meta;

type FooterProps = React.ComponentProps<typeof Footer>;

const Template: Story<FooterProps> = () => <Footer />;
export const Default = Template.bind({});

에러코드

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.

리액트 파일에서 이 코드를 삭제하면 에러가 발생하지 않는다

수정코드

svg 파일을 리액트 컴포넌트로 가져오지 않고 Next image로 가져오면 된다.

      <Image
        src="logos/logoFooter.svg"
        className="mb-[12px]"
        width="81"
        height="17"
        alt="로고"
      />