我有一个简单的组件，循环按钮。TS构建失败，我调用此循环时出错

17:60  Error: Invalid type "string | undefined" of template literal expression.

字符串
我在JSX返回中调用该函数，如下所示

{customerList && customerList as JSX.Element[]}

型
在我循环输出按钮的文件中没有模板文字，所以我不认为有问题。但这里是完整的文件（没有导入和导出）

const HiglightedCustomers = ({ customers, title }: { customers: Kunder[], title : string }) => {
  const CustomerTemplate = ({customer}:{customer: Kunder}) => {
    const {url, name} = customer
    return <div className="p-2">
        <Button href={url || "#"} externalLink={true} variant="bg-primary-light-pink">{name}</Button>
        </div>
  }
    const customerList = customers?.map((customer) => <CustomerTemplate key={customer.id} customer={customer} />);

    return (
    <div className="border bg-red-500 ">
      <h2 className="text-3xl  text-center">{title}</h2>
      <div className="flex max-w-3xl pt-3 flex-wrap justify-center">
      {customerList && customerList as JSX.Element[]}
      </div>
    </div>
  );
};

型
在我的-component中，我使用模板文字。但我这样做的方式对我来说似乎是安全的。我为我的props和函数设置了默认值，即使模板字面量是未定义的，它们也能正常工作
我的按钮文件

import { z } from 'zod';
import Link from 'next/link';
import { BgColorVariants } from '@/lib/commonTypes';

type Variant = z.infer<typeof BgColorVariants>;

const ButtonSchema = z.object({
  variant: BgColorVariants.optional(),
  children: z.string(),
  link: z.boolean().optional(), 
  externalLink: z.boolean().optional(),
  href: z.string().optional(),
});

type ButtonProps = z.infer<typeof ButtonSchema>;

const Button = ({ variant = 'bg-black', externalLink = false, href, children,...rest }: ButtonProps) => {
  const textColor = ({variant}:{variant: Variant}) => {
    // Returner svart tekst på bakgrunner som krever svart tekst, ellers svart tekst 
    if(variant === "bg-primary-light-pink"){
      return "text-black "
    }
    else {
      return "text-white group-hover:text-black"
    }
  }
  
  const ButtonContent = () => {
    const buttonStyle = `relative z-10 inline-flex items-center justify-center h-full w-full rounded py-2 px-3 ${textColor({ variant }) || ''} ${variant} border border-black group-hover:bg-primary-pink  group-hover:border-black group-hover:border-w`
    const shadowBox = "absolute top-[0.15em] left-[0.15em] h-full w-full group-hover:bg-black bg-transparent rounded py-2 px-3 z-0 group-hover:border-black group-hover:border "
    return (
      <div className="relative inline-block group">
        <div className={shadowBox}></div>
        <div className={buttonStyle}>{children}</div>
      </div>
    )
  };

  return (
    <>
      {href && !externalLink && <Link  href={href}><ButtonContent /></Link> }
      {href && externalLink && <a href={href} rel="external nofollow"><ButtonContent /></a> }
      {!href && <button ><ButtonContent /></button>}
      </>
  );
};

型
我快没办法了，这几天一直在调试这个程序。任何关于如何解决这个问题的建议都是非常受欢迎的。