useFieldArray with @mui/material Tabs

[StefanZivkovic]

Hi

i have an example with simple form having tabs. And i want to use useFieldArray, but it feels like its not working as i would like it to work. Probably I am missing something, but not sure what. Basically i use this

const [tab, setTab] = useState("basic");
 const { fields, append } = useFieldArray({
    name: tab,
    control
  });

Here is the sandbox: https://codesandbox.io/s/usefieldarray-with-tabs-78lhd7?file=/src/App.js.

However, this is the working as expected version - https://codesandbox.io/s/usefieldarray-with-tabs-working-ly3yr5?file=/src/App.js, but here i had to manually / hard_code useFieldArray per each tab

  const { fields, append } = useFieldArray({
   name: tab, // 'basic'
   control
 });
 const { fields: premiumFields, append: premiumAppend } = useFieldArray({
   name: tab, // 'premium'
   control
 });
 const { fields: exclusiveFields, append: exclusiveAppend } = useFieldArray({
   name: tab, // 'exclusive'
   control
 });
 
 // and then for each tab to duplicate the same code

Any idea how to make things work with first approach? I would like not to use 2nd one if I don't have to