Import tsx file

Question

My product has two part , first part can't import referral part, and import link shows light pink color it says that it hasnt value! I send both codes please guide me to fix this issue Thanks

import { useEffect, useMemo, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../store";
import config from "../config";
import { useWeb3Modal } from "@web3modal/react";
import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
import useWeb3Functions from "../hooks/useWeb3Functions";
import Loading from "./Loading";
import { setCurrentChain } from "../store/presale";
import { useTranslation } from "react-i18next";
import { ReferralModal } from "./ReferralModal";
import { ReactComponent as DownArrowIcon } from "/src/assets/svg/down-arrow.svg";

const BuyForm = () => {
  const { t } = useTranslation();
  const { chain } = useNetwork();
  const { switchNetwork } = useSwitchNetwork();
  const dispatch = useDispatch();
  const chainId = useSelector((state: RootState) => state.presale.chainId);
  const tokens = useSelector((state: RootState) => state.presale.tokens);
  const balances = useSelector((state: RootState) => state.wallet.balances);
  const tokenPrices = useSelector((state: RootState) => state.presale.prices);
  const saleStatus = useSelector(

And referral part:

import { useEffect, useMemo, useRef, useState } from "react";
import { createTeleporter } from "react-teleporter";
import { ReactComponent as CloseIcon } from "/src/assets/svg/close.svg";
import { useCopyToClipboard } from "react-use";
import { useSelector } from "react-redux";
import { RootState } from "../store";

type Props = {
  closeModal: Function;
};

const ReferralModalTeleport = createTeleporter();

export function ReferralModalTarget() {
  return <ReferralModalTeleport.Target />;
}

export function ReferralModal({ closeModal }: Props) {
  const user = useSelector((state: RootState) => state.wallet.user);

  const refferralLink = useMemo(
    () => `https://www.domain.io/?ref=${user?.ref_address}`,
    [user]
  );
  const [copyBtnText, setCopyBtnText] = useState("Copy link" as string);
  const [_, copyText] = useCopyToClipboard();

  const copy = (text: string) => {
    copyText(text);
    setCopyBtnText("Copied!");
    setTimeout(() => {
      setCopyBtnText("Copy link");
    }, 4000);
  };

  const dialog = useRef<HTMLDivElement>(null);
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "unset";
    };
  }, []);

  const clickOutside = (event: any) => {
    const childElement = dialog.current;
    if (
      event.target instanceof HTMLElement &&
      !childElement?.contains(event.target)
    ) {
      closeModal();
    }
  };
  return (
    <ReferralModalTeleport.Source>
      <div
        className="fixed inset-0 z-50 flex h-full w-full items-center justify-center bg-[#131212]/70 px-4 lg:px-0"
        onClick={clickOutside}
      >
        <div
          ref={dialog}
          className="w-full max-w-xl rounded-3xl border border-white/10 bg-[#1A2025]/70 p-6 backdrop-blur-xl lg:p-8"
        >
          <div className="mb-2.5 flex items-center justify-between">
            <h4 className="text-2xl font-medium">Your referral link</h4>
            <CloseIcon
              className="cursor-pointer transition-opacity duration-200 hover:opacity-75"
              onClick={() => closeModal()}
            />
          </div>
          <p className="mb-5 text-white/50">
          Share your link with your friends to receive some bonuses!
          </p>
          <div className="flex flex-wrap gap-4">
            <input
              className="flex-1 rounded-xl bg-[#232C3A]/50 py-4 px-4 "
              disabled
              type="text"
              value={refferralLink}
            />
            <button
              onClick={() => copy(refferralLink)}
              className="rounded-xl bg-[#2F3B4F] py-4 px-6 transition-opacity duration-200 hover:opacity-75"
            >
              {copyBtnText}
            </button>
          </div>
        </div>
      </div>
    </ReferralModalTeleport.Source>
  );
}

I tried to change Referralmodal code to referralmodaltarget but doesnt works i dont know how can fix it please guide me