Why this happens?

You're encountering a React warning about the key prop being spread into JSX, which React reserves for internal list reconciliation. The warning shows up even though you're not directly spreading into a component. Let's break this down - there are 3 ways to fix this:

1. Rename the prop to avoid the collision

If the key is not meant for React’s reconciliation, rename it before it even hits the component level:

<MyComponent keyProp={someKey} ... />

Then in your component:

const App = ({ aiohttpState, keyProp, ...adminProps }) => {
    ...
};

This avoids React's reserved key namespace.

2. Use a different variable name when destructuring

If you must accept a prop called key (e.g., due to an external API or legacy data), alias it during destructuring:

const App = ({ aiohttpState, key: reactKey, ...adminProps }) => {
    ...
};

This ensures reactKey is no longer a candidate for accidental JSX spreading.

3. Final JSX should never spread key

Double-check downstream JSX rendering:

<TextInput key={reactKey} {...adminProps} />  // ✅ safe and clean

Summary

React reserves key for list diffing logic, so even if you're not spreading it into JSX, extracting it from props sets off a warning due to potential misuse. Rename it early or alias it during destructuring to maintain compliance and suppress the warning.

Hope this helps!

Cheers, AristoByte