refactor form fields to enable usage with react-hook-form

[Pilopa]

Proposed changes

React Hook Form is a library that makes working with forms easier and reduces boilerplate. For it to be used in our project, some of the form fields had to be adjusted.

Your checklist for this pull request

Put an x in the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.

Contributor:

• PR is well described and the description can be used as a commit message on squash
• Related issues linked to PR if existing and labels set
• Target branch is not master (in most cases develop should bet the target of choice)
• Code does not conflict with target branch
• New code is covered with unit tests
• New ui components are tested inside the storybook (module ui-components only)
• Changelog entry file created in gradle/changelog or CHANGELOG.md is updated for plugins
• Documentation updated (only necessary for new features or changed behaviour)

Reviewer:

• The clean code principles are respected (CleanCode)
• All new code/logic is implemented on the right spot / "Should this be done here?"
• UI changes fits into the layout
• The UI views / components are responsive (mobile views)
• Correct translations are available

Checklist for branch merge request (not required for forks)

• Branch is green/blue on Jenkins
• Quality Gate passed on SonarQube

[sonarcloud]

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

51.9% Coverage
7.9% Duplication