What if i want to pass children?

[beautyfree]

import { FunctionComponent } from "preact";
import { w, W } from "windstitch";

const Title = w.div("leading-3 tracking-[0.066px]");

const Value = w.div("text-[15px] font-semibold tracking-[-.5px]", {
  variants: {
    color: {
      green: "text-emerald-500",
      default: "text-zinc-800",
    },
  },
  defaultVariants: {
    color: "default",
  },
});
type ValueProps = W.Infer<typeof Value>;

interface Props {
  title: string;
  green: ValueProps["color"];
  value: string;
  subvalue?: string;
}

export const Column: FunctionComponent<Props> = ({
  title,
  green,
  value,
  subvalue,
}) => {
  return (
    <div className="flex-col justify-center items-start gap-0.5 inline-flex font-['SF Pro Text'] font-normal text-slate-500 text-[11px]">
      <Title>{title}</Title>
      <Value color={green}>{value}</Value>
      {subvalue ? <Title>{subvalue}</Title> : null}
    </div>
  );
};

I got error on <Value color:

Type '{ children: string; color: "green" | "default" | undefined; }' is not assignable to type 'IntrinsicAttributes & { as?: "div" | undefined; } & GetPropsWithoutVariantsKeys<"div", { color: { green: string; default: string; }; }> & Omit<...> & Partial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & { as?: "div" | undefined; } & GetPropsWithoutVariantsKeys<"div", { color: { green: string; default: string; }; }> & Omit<...> & Partial<...>'

[beautyfree]

oh, looks like this type error reproduces only with preact https://codesandbox.io/s/vigorous-meninsky-wxjdsw?file=/src/App.tsx