Hello! i'm wondering what is the best way to accomplish this kind behavior with nextjs.
I have card that has list of accordions, and accordion has form that is a WorkExperience form.
Well those accordions comes from fetched Resume.workExperience from the database. User can also click button "add WorkExperience" that would make a new accordion that contains a form that user can fill with their work information.
I have used React Hook Form useFieldArray to accomplish this for now. But now i started to think is there way to do this with server component and server actions?
I will be having also more tabs like education with same kind behavior.

Thought i want to have a live preview of the user written forms showed, so i have form and form.watch that will show the live preview. U guys think that is necessary or is there better way to do this? 

Here is fastly build example what i have but without shadcn styles and everything is under one folder etc.

https://stackblitz.com/edit/stackblitz-starters-a9dlzp?file=app%2FWorkExperienceDetail.tsx

But it basically somewhat follows that structure.

But my main question is what kind approach i should take to this kind problem.
I will be making more forms later with same kind approach so i think i need verification that i'm doing somewhat correctly this 🙂
Thank u from reading.

if needed i can provide also github repo.