[Bug?]: Hydration Mismatch for passed JSX elements

[illiaChaban]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When i pass jsx elements as a prop to my separation component I get hydration errors

export default function Home() {
  return (
    <main class="text-white">
      {/* works --> */}
      <Separate items={['hello 1']} />
      <Separate items={['hello 1', 'hello 2']} />
      {/* doesn't work --> */}
      <Separate items={[<span>Hello</span>, <span>world</span>]} />
    </main>
  );
}

const Separate = (p: { items: JSX.Element[] }) => {
  return (
    <p>
      <For each={p.items}>
        {(item, i) =>
          i() === p.items.length - 1 ? <>{item}</> : <>{item} • </>
        }
      </For>
    </p>
  );
};

Expected behavior 🤔

it should work without hydration errors "Hydration Mismatch. Unable to find DOM nodes for hydration key ..."

Steps to reproduce 🕹

Stackblitz link

Steps:

1. Use this component:

   
   export default function Home() {
   return (
   <main class="text-white">
     {/* works --> */}
     <Separate items={['hello 1']} />
     <Separate items={['hello 1', 'hello 2']} />
     {/* doesn't work --> */}
     <Separate items={[<span>Hello</span>, <span>world</span>]} />
   </main>
   );
   }

const Separate = (p: { items: JSX.Element[] }) => { return (

{(item, i) => i() === p.items.length - 1 ? <>{item} : <>{item} • }

); };

### Context 🔦

error "Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-0-3-1-2"

### Your environment 🌎

```shell
"dependencies": {
    "@solidjs/router": "^0.13.3",
    "@solidjs/start": "^1.0.2",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "solid-js": "^1.8.17",
    "tailwindcss": "^3.4.3",
    "vinxi": "^0.3.12"
  },
  "engines": {
    "node": ">=18"
  },
  "devDependencies": {
    "sass": "^1.77.6"
  }

[illiaChaban]

Update: if i pass a function that returns JSXElement instead of JSXElement instead, it works Although i don't think it's a fully expected behavior and I would still expect passing JSXElements to work i.e

<Separate items={[() => <span>Hello</span>, () => <span>world</span>]} />