"template2 is not function" error when using "startElement" or "endElement" of InputGroup component with Solid-Start

[TangoYankee]

Description

I am getting an error when using the "endElement" or "startElement" of the InputGroup component. It states "template2 is not a function". The error does not appear when using the InputGroup component without a "startElement" or "endElement".

Package versions

• "@solidjs/start": "^1.3.2"
• "@ark-ui/solid": "^5.36.2"
• "@pandacss/dev": "^1.11.1"
• "@park-ui/cli": "^1.0.0"

Context

"It's related to hydration. For hydration to work, the render on the server and the initial render on the client have to be exactly the same."

• stack overflow

Proposed fix

In line with the philosophy of Park-UI, I applied a change locally.

The original component places the elements on a "local" variable

export const InputGroup = (props: InputGroupProps) => {
  const [[local], rest] = splitProps(props, [
    "startElement",
    "endElement",
  ]);

  return (
    <Root {...rest}>
      <Show when={local.startElement}>
        <Element insetInlineStart="0" top="0">
          {local.startElement}
        </Element>
      </Show>
      {rest.children}
      <Show when={local.endElement}>
        <Element insetInlineEnd="0" top="0">
          {local.endElement}
        </Element>
      </Show>
    </Root>
  );
};

I changed it to destructure directly into "startElement" and "endElement".

export const InputGroup = (props: InputGroupProps) => {
  const [{ startElement, endElement }, rest] = splitProps(props, [
    "startElement",
    "endElement",
  ]);

  return (
    <Root {...rest}>
      <Show when={startElement}>
        <Element insetInlineStart="0" top="0">
          {startElement}
        </Element>
      </Show>
      {rest.children}
      <Show when={endElement}>
        <Element insetInlineEnd="0" top="0">
          {endElement}
        </Element>
      </Show>
    </Root>
  );
};