React component nesting hydration errors

[jlarmstrongiv]

What version of HonoX are you using?

0.1.26

What steps can reproduce the bug?

Nest an island within an island or nest an island within a non-island

What is the expected behavior?

No console warnings

What do you see instead?

c.render(
  <div>
      <p>NonIslandCounter within Counter</p>
        <Counter>
        <NonIslandCounter />
      </Counter>

      <p>Counter within Counter</p>
      <Counter key="my-parent-counter">
        <Counter key="my-counter" />
      </Counter>
  </div>
)

Generate warnings:

counter.tsx:21 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `WrappedCounter`. See https://reactjs.org/link/warning-keys for more information.
    at WrappedCounter
    at WrappedCounter
printWarning @ react_jsx-dev-runtime.js?v=03002a98:64
error @ react_jsx-dev-runtime.js?v=03002a98:48
validateExplicitKey @ react_jsx-dev-runtime.js?v=03002a98:724
validateChildKeys @ react_jsx-dev-runtime.js?v=03002a98:737
jsxWithValidation @ react_jsx-dev-runtime.js?v=03002a98:855
WrappedCounter @ counter.tsx:21
renderWithHooks @ react-dom_client.js?v=03002a98:11548
mountIndeterminateComponent @ react-dom_client.js?v=03002a98:14926
beginWork @ react-dom_client.js?v=03002a98:15914
beginWork$1 @ react-dom_client.js?v=03002a98:19753
performUnitOfWork @ react-dom_client.js?v=03002a98:19201
workLoopSync @ react-dom_client.js?v=03002a98:19137
renderRootSync @ react-dom_client.js?v=03002a98:19116
performConcurrentWorkOnRoot @ react-dom_client.js?v=03002a98:18678
workLoop @ react-dom_client.js?v=03002a98:197
flushWork @ react-dom_client.js?v=03002a98:176
performWorkUntilDeadline @ react-dom_client.js?v=03002a98:384Understand this errorAI
react-dom_client.js?v=03002a98:521 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at DIV
    at div
    at div
    at CounterOriginal (http://localhost:8787/app/islands/counter.tsx?t=1729400345383&v=03002a98:5:3)
    at WrappedCounter
printWarning @ react-dom_client.js?v=03002a98:521
error @ react-dom_client.js?v=03002a98:505
warnForMissingKey @ react-dom_client.js?v=03002a98:9864
warnOnInvalidKey @ react-dom_client.js?v=03002a98:10205
reconcileChildrenArray @ react-dom_client.js?v=03002a98:10235
reconcileChildFibers2 @ react-dom_client.js?v=03002a98:10559
reconcileChildren @ react-dom_client.js?v=03002a98:14290
updateHostComponent @ react-dom_client.js?v=03002a98:14807
beginWork @ react-dom_client.js?v=03002a98:15935
beginWork$1 @ react-dom_client.js?v=03002a98:19753
performUnitOfWork @ react-dom_client.js?v=03002a98:19201
workLoopSync @ react-dom_client.js?v=03002a98:19137
renderRootSync @ react-dom_client.js?v=03002a98:19116
performConcurrentWorkOnRoot @ react-dom_client.js?v=03002a98:18678
workLoop @ react-dom_client.js?v=03002a98:197
flushWork @ react-dom_client.js?v=03002a98:176
performWorkUntilDeadline @ react-dom_client.js?v=03002a98:384Understand this errorAI
react-dom_client.js?v=03002a98:521 Warning: Invalid DOM property `class`. Did you mean `className`?
    at BUTTON
    at DIV
    at div
    at div
    at CounterOriginal (http://localhost:8787/app/islands/counter.tsx?t=1729400345383&v=03002a98:5:3)
    at WrappedCounter

Additional information

#150
#155