카카오 링크 질문입니다

JavaScript
1 
import { useEffect } from "react";

const KaKaoShareButton = () => {
  const kakaourl = document.URL;
  useEffect(() => {
    createKakaoShareButton();
  }, []);
  const createKakaoShareButton = () => {
    if (window.Kakao) {
      const kakao = window.Kakao;

      if (!kakao.isInitialized()) {
        kakao.init(process.env.REACT_APP_KAKAO_KEY);
      }

      kakao.Link.createDefaultButton({
        container: "#kakao-link-btn",
        objectType: "feed",
        imageUrl: kakaourl,
        content: {
          title: "타이틀",
          description: "#리액트 #카카오 #공유버튼",
          link: {
            mobileWebUrl: window.location.href,
            webUrl: window.location.href,
          },
        },
        buttons: [
          {
            title: "웹으로 보기",
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
          {
            title: "앱으로 보기",
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
        ],
      });
    }
  };
  return (
    <button id="kakao-link-btn">
      <img src="../assets/카카오톡 로고 1.png" alt="kakao-icon" />
    </button>
  );
};

export default KaKaoShareButton;

현재 리액트와 타입스크립트로 카카오 공유하기 기능을 구현하고 있습니다. 버튼 클릭 시에
image

다음과 같은 오류가 나는데 구글링 해봐도 해결방법이 다 다르고 적용해봐도 해결이 안되네요…

2

카카오톡 공유: JavaScript | Kakao Developers 카카오톡 공유: JavaScript

imageUrl은 content안에 있어야합니다.
가이드 참고 부탁드려요~