Fix incorrect react syntax inside MUI ArrayFieldTemplate (broken hook order)

[cerpins]

Reasons for making this change

Misuse of functional react is causing following console error in my application (which I'm trying to avoid).

After investigation, I notice that DefaultArrayItem is invoked as a function, not as a JSX.Element. Inside of DefaultArrayItem a hook is called, and since the component is called conditionally (as callback to .map) and not as an JSX.Element but a function, this plays out as broken hook order.

If this is related to existing tickets, include links to them as well. Use the syntax fixes #[issue number] (ex: fixes #123).
Could not find if this is related to any existing tickets

Please double check PR and let me know how I can get this merged, thanks.

Checklist

• I'm adding or updating code
  • Fix error by invoking local component as a JSX component, instead of function
  • Pass key to JSX component so that there is no console.error about not using key

[heath-freenome]

While this is a good fix, in August we will be releasing rjsf v5 beta that removes the entire hook issue entirely. Unfortunately this will be a breaking release. How seriously is this causing issues for you?

[cerpins]

While this is a good fix, in August we will be releasing rjsf v5 beta that removes the entire hook issue entirely. Unfortunately this will be a breaking release. How seriously is this causing issues for you?

Thanks for the reply. It's mildly bothersome, but nothing urgent that I couldn't wait on. Primary issue is that I don't want my test suite polluted with library errors, since I have tests configured to fail on (unexpected) console errors. As long as you are working on it one way or another, I am happy :)

Edit:
I guess an additional concern for me would be - how breaking is this upcoming change exactly?

[heath-freenome]

This was fixed by removing hooks entirely from the @rjsf/material-ui and new @rjsf/mui themes. Please see the 5.x migration guide for details