Passing For Id between InputGroup and Input using children

<InputGroup
  label="Email"
  error="that's not an email"
>
  <Input 
    placeholder="like@this.com"
  />
</InputGroup>

<InputGroup
  label="Email"
  error="that's not an email"
>
  <Input 
    placeholder="like@this.com"
  />
</InputGroup>

export default function InputGroup(props: InputGroupProps) {
  const { label, error, children: childrenProp } = props;
  const [forId] = createSignal(`input-${Math.random().toString(36).substr(2, 9)}`);
  const renderedChildren = children(() => childrenProp);

  createEffect(() => {
    const child = renderedChildren();
    if (child?.props) {
      child.props.id = forId();
    }
  });

  return (
    <>
      <label for={forId()}>{label}</label>
      {renderedChildren()}
      <Show when={!!error}>
        <p>{error}</p>
      </Show>
    </>
  );
}

export default function InputGroup(props: InputGroupProps) {
  const { label, error, children: childrenProp } = props;
  const [forId] = createSignal(`input-${Math.random().toString(36).substr(2, 9)}`);
  const renderedChildren = children(() => childrenProp);

  createEffect(() => {
    const child = renderedChildren();
    if (child?.props) {
      child.props.id = forId();
    }
  });

  return (
    <>
      <label for={forId()}>{label}</label>
      {renderedChildren()}
      <Show when={!!error}>
        <p>{error}</p>
      </Show>
    </>
  );
}

Property 'props' does not exist on type 'number | boolean | Node | (string & {}) | ResolvedJSXElement[]'.

Property 'props' does not exist on type 'number | boolean | Node | (string & {}) | ResolvedJSXElement[]'.