From 406c2d86683d36d253736da2e885517e981acda3 Mon Sep 17 00:00:00 2001
From: Joshua Toliver <jtoliver@quoininc.com>
Date: Fri, 14 Jun 2024 17:26:16 -0400
Subject: [PATCH] Migrating from arrow components to function components

---
 .eslintrc.js                                  |  4 +-
 app/javascript/app.jsx                        |  4 +-
 .../components/default-button/component.jsx   |  6 +-
 .../components/icon-button/component.jsx      |  4 +-
 .../components/link/component.jsx             |  4 +-
 .../components/action-dialog/component.jsx    |  6 +-
 .../components/text-with-close/component.jsx  |  4 +-
 .../components/activity-log/component.jsx     |  4 +-
 .../components/activity-item/component.jsx    |  4 +-
 .../application-routes/app-route.jsx          |  4 +-
 .../application-routes/component.jsx          |  4 +-
 .../application-routes/sub-route.jsx          |  4 +-
 .../components/application/use-app.jsx        |  4 +-
 .../approvals/components/detail/component.jsx |  4 +-
 .../approvals/components/panel/component.jsx  |  4 +-
 .../components/summary/component.jsx          |  4 +-
 .../components/approvals/container.jsx        |  4 +-
 .../components/button-text/component.jsx      |  4 +-
 .../components/change-log-item/component.jsx  |  4 +-
 .../components/change-log/component.jsx       |  6 +-
 .../components/subform-dialog/component.jsx   |  6 +-
 .../components/change-logs/container.jsx      |  6 +-
 .../components/charts/bar-chart/component.jsx |  4 +-
 .../charts/table-values/component.jsx         |  6 +-
 .../components/table-header/component.jsx     |  4 +-
 .../components/table-rows/component.jsx       |  4 +-
 .../components/code-of-conduct/component.jsx  |  4 +-
 .../components/actions/component.jsx          |  4 +-
 .../components/cancel-dialog/component.jsx    |  4 +-
 .../contact-information/container.jsx         |  4 +-
 .../custom-snackbar-provider/component.jsx    |  4 +-
 .../dashboard/action-menu/component.jsx       |  4 +-
 .../dashboard/badged-indicator/component.jsx  |  4 +-
 .../dashboard/dashboard-chip/component.jsx    |  4 +-
 .../dashboard/dashboard-table/component.jsx   |  4 +-
 .../dashboard/doughnut-chart/component.jsx    |  4 +-
 .../dashboard/flag-box/component.jsx          |  4 +-
 .../components/flag-box-item/component.jsx    |  4 +-
 .../dashboard/flag-list/component.jsx         |  4 +-
 .../dashboard/line-chart/component.jsx        |  4 +-
 .../dashboard/options-box/component.jsx       |  4 +-
 .../dashboard/overview-box/component.jsx      |  4 +-
 .../dashboard/pie-chart/component.jsx         |  4 +-
 .../dashboard/priority-summary/component.jsx  |  4 +-
 .../dashboard/services/component.jsx          |  4 +-
 .../components/demo-indicator/component.jsx   |  4 +-
 .../components/disable-offline/component.jsx  |  4 +-
 .../components/offline-alert/component.jsx    |  4 +-
 .../components/display-data/component.jsx     |  4 +-
 .../components/error-state/component.jsx      |  4 +-
 .../components/flagging/component.jsx         |  4 +-
 .../flagging/components/TabPanel.jsx          |  4 +-
 .../components/dialog-tabs/component.jsx      |  4 +-
 .../components/flag-dialog/component.jsx      |  4 +-
 .../components/flag-form/component.jsx        |  4 +-
 .../list-flags-item-actions/component.jsx     |  4 +-
 .../components/list-flags-item/component.jsx  |  4 +-
 .../components/list-flags/component.jsx       |  4 +-
 .../flagging/components/unflag/component.jsx  |  4 +-
 .../components/form-filters/component.jsx     |  4 +-
 .../components/change-log/component.jsx       |  4 +-
 .../components/filters-form/component.jsx     |  6 +-
 app/javascript/components/form/component.jsx  |  6 +-
 .../components/actions-menu/container.jsx     |  4 +-
 .../form/components/cancel-prompt.jsx         |  4 +-
 .../components/draggable-option/component.jsx |  6 +-
 .../draggable-option/component.spec.js        | 32 ++++----
 .../form/components/form-action.jsx           | 13 +--
 .../form/components/form-section-actions.js   |  4 +-
 .../form/components/form-section-field.jsx    |  4 +-
 .../components/form-section-field.spec.js     |  4 +-
 .../form-section-tabs/component.jsx           |  4 +-
 .../form/components/form-section-title.jsx    |  4 +-
 .../form/components/form-section.jsx          |  4 +-
 .../form/components/input-label.jsx           |  4 +-
 .../components/watched-form-section-field.jsx |  4 +-
 .../form/fields/attachment-input.jsx          |  4 +-
 .../components/form/fields/checkbox-group.jsx |  4 +-
 .../components/form/fields/checkbox-input.jsx |  4 +-
 .../components/form/fields/date-input.jsx     |  4 +-
 .../components/form/fields/dialog-trigger.jsx |  4 +-
 .../components/form/fields/error-field.jsx    |  4 +-
 .../form/fields/error-field.spec.js           |  8 +-
 .../components/form/fields/hidden-input.jsx   |  4 +-
 .../components/form/fields/label.jsx          |  4 +-
 .../components/form/fields/link-field.jsx     |  4 +-
 .../form/fields/orderable-options-field.jsx   | 10 +--
 .../components/form/fields/radio-input.jsx    |  4 +-
 .../form/fields/record-attachment-input.jsx   |  4 +-
 .../components/form/fields/select-input.jsx   |  4 +-
 .../components/form/fields/seperator.jsx      |  4 +-
 .../components/form/fields/switch-input.jsx   |  4 +-
 .../components/form/fields/text-input.jsx     |  4 +-
 .../components/form/fields/toggle-input.jsx   |  4 +-
 app/javascript/components/i18n/provider.js    |  4 +-
 .../components/i18n/provider.spec.js          |  8 +-
 .../components/detail/component.jsx           |  6 +-
 .../components/panel/component.jsx            |  6 +-
 .../components/summary/component.jsx          |  4 +-
 .../incidents-from-case/container.jsx         |  6 +-
 .../components/index-filters/component.jsx    |  4 +-
 .../index-filters/components/actions.jsx      |  4 +-
 .../components/filter-category.jsx            |  4 +-
 .../checkbox-filter/component.jsx             |  4 +-
 .../filter-types/chips-filter/component.jsx   |  4 +-
 .../filter-types/date-filter/component.jsx    |  4 +-
 .../filter-types/date-filter/field-select.jsx |  4 +-
 .../components/filter-types/search.jsx        |  4 +-
 .../filter-types/select-filter/component.jsx  |  6 +-
 .../filter-types/switch-filter/component.jsx  |  4 +-
 .../filter-types/toggle-filter/component.jsx  |  4 +-
 .../index-filters/components/more-section.jsx |  6 +-
 .../index-filters/components/panel.jsx        |  4 +-
 .../index-filters/components/tab-filters.jsx  |  6 +-
 .../index-table/cell-renderers/DateCell.jsx   |  4 +-
 .../cell-renderers/ToggleIconCell.jsx         |  4 +-
 .../components/index-table/component.jsx      |  6 +-
 .../index-table/components/data-table.jsx     |  6 +-
 .../custom-toolbar-select/component.jsx       |  6 +-
 .../components/insights-filters/component.js  |  4 +-
 .../components/insight-filter-tags.jsx        |  4 +-
 .../components/insights-list/container.jsx    |  4 +-
 .../components/exporter/exporter.jsx          |  4 +-
 .../component.jsx                             |  4 +-
 .../insights-table-header/component.jsx       |  4 +-
 .../insights-sub-report/container.jsx         |  4 +-
 .../components/insights/component.jsx         |  4 +-
 .../insights/components/exporter.jsx          |  4 +-
 .../insights-exporter/component.jsx           |  4 +-
 .../components/internal-alert/component.jsx   |  4 +-
 .../components/dismiss-button/component.jsx   |  4 +-
 .../components/item/component.jsx             |  4 +-
 app/javascript/components/jewel/component.jsx |  4 +-
 .../key-performance-indicators/component.jsx  |  4 +-
 .../component.spec.js                         |  5 +-
 .../assessment-status/component.jsx           |  4 +-
 .../component.jsx                             |  4 +-
 .../average-referrals/component.jsx           |  4 +-
 .../case-closure-rate/component.jsx           |  4 +-
 .../components/case-load/component.jsx        |  4 +-
 .../client-satisfaction-rate/component.jsx    |  4 +-
 .../completed-case-action-plan/component.jsx  |  4 +-
 .../completed-case-safety-plan/component.jsx  |  4 +-
 .../component.jsx                             |  4 +-
 .../date-range-dialog/component.jsx           |  4 +-
 .../date-range-select/component.jsx           |  4 +-
 .../goal-progress-per-need/component.jsx      |  4 +-
 .../components/kpi-table/component.jsx        |  4 +-
 .../components/number-of-cases/component.jsx  |  4 +-
 .../number-of-incidents/component.jsx         |  4 +-
 .../components/percentage-cell/component.jsx  |  4 +-
 .../components/reporting-delay/component.jsx  |  4 +-
 .../services-provided/component.jsx           |  4 +-
 .../single-aggregate-metric/component.jsx     |  4 +-
 .../stacked-percentage-bar/component.jsx      |  4 +-
 .../component.jsx                             |  4 +-
 .../component.jsx                             |  4 +-
 .../component.jsx                             |  4 +-
 .../table-percentage-bar/component.jsx        |  4 +-
 .../component.jsx                             |  4 +-
 .../components/layouts/component.jsx          |  4 +-
 .../components/app-layout/component.jsx       |  4 +-
 .../components/empty-layout/component.jsx     |  4 +-
 .../components/login-layout/component.jsx     |  4 +-
 .../components/lightbox/component.jsx         |  4 +-
 .../components/list-icon/component.jsx        |  4 +-
 .../components/empty-state.jsx                |  4 +-
 .../components/loading-indicator/loading.jsx  |  4 +-
 .../components/login-dialog/component.jsx     |  4 +-
 .../components/primero-idp-link.jsx           |  4 +-
 .../components/primero-idp-select.jsx         |  4 +-
 .../components/idp-selection/container.jsx    |  4 +-
 .../login/components/login-form/component.jsx |  4 +-
 .../password-reset-dialog/component.jsx       |  4 +-
 .../password-reset-form/component.jsx         |  4 +-
 app/javascript/components/menu/component.jsx  |  4 +-
 .../components/mobile-toolbar/component.jsx   |  4 +-
 .../components/module-logo/component.jsx      |  4 +-
 app/javascript/components/nav/component.jsx   |  4 +-
 .../components/nav/component.spec.js          |  4 +-
 .../nav/components/menu-entry/component.jsx   |  4 +-
 .../nepali-calendar-input/component.jsx       |  4 +-
 .../network-indicator/component.jsx           |  4 +-
 .../components/not-implemented/component.jsx  |  4 +-
 .../components/notifier/component.js          |  4 +-
 .../components/snackbar-action/component.jsx  |  4 +-
 .../components/page-navigation/component.jsx  |  4 +-
 app/javascript/components/page/component.jsx  |  4 +-
 .../page/components/page-content.jsx          |  4 +-
 .../page/components/page-heading.jsx          |  6 +-
 .../components/pages/account/container.jsx    |  4 +-
 .../components/pages/admin/admin-nav-item.jsx |  4 +-
 .../components/pages/admin/admin-nav.jsx      |  4 +-
 .../pages/admin/agencies-form/container.jsx   |  4 +-
 .../pages/admin/agencies-list/container.jsx   |  4 +-
 .../pages/admin/audit-logs/container.jsx      |  4 +-
 .../pages/admin/code-of-conduct/component.jsx |  4 +-
 .../admin/configurations-form/container.jsx   |  4 +-
 .../admin/configurations-list/container.jsx   |  4 +-
 .../admin/contact-information/component.jsx   |  4 +-
 .../components/pages/admin/container.jsx      |  4 +-
 .../pages/admin/form-builder/component.jsx    |  4 +-
 .../components/action-buttons/component.jsx   |  4 +-
 .../components/clear-buttons/component.jsx    |  4 +-
 .../custom-field-dialog/component.jsx         |  4 +-
 .../component.jsx                             |  4 +-
 .../existing-field-dialog/component.jsx       |  4 +-
 .../components/fields-table/component.jsx     |  4 +-
 .../components/selection-column/component.jsx |  4 +-
 .../components/field-dialog/component.jsx     |  4 +-
 .../components/field-list-item/component.jsx  |  4 +-
 .../field-list-item/component.spec.js         | 82 ++++++++++---------
 .../field-translations-dialog/component.jsx   |  4 +-
 .../translatable-options/component.jsx        |  4 +-
 .../components/fields-list/component.jsx      |  4 +-
 .../components/fields-tab/component.jsx       |  4 +-
 .../form-translations-dialog/component.jsx    |  4 +-
 .../components/settings-tab/component.jsx     |  4 +-
 .../subform-fields-list/component.jsx         |  4 +-
 .../components/tab-panel/component.jsx        |  4 +-
 .../translations-form/component.jsx           |  4 +-
 .../field-translation-row/component.jsx       |  4 +-
 .../translations-note/component.jsx           |  4 +-
 .../components/translations-tab/component.jsx |  4 +-
 .../pages/admin/forms-list/component.jsx      |  4 +-
 .../components/drag-indicator/component.jsx   |  4 +-
 .../components/filter-input/component.jsx     |  4 +-
 .../filters-expansion-panel/component.jsx     |  4 +-
 .../components/form-exporter/component.jsx    |  4 +-
 .../components/form-filters/component.jsx     |  4 +-
 .../components/form-group/component.jsx       |  4 +-
 .../components/form-group/component.spec.js   | 28 ++++---
 .../components/form-section/component.jsx     |  4 +-
 .../components/form-section/component.spec.js | 12 +--
 .../components/reorder-actions/component.jsx  |  4 +-
 .../components/table-row/component.jsx        |  4 +-
 .../components/table-row/component.spec.js    | 24 +++---
 .../pages/admin/locations-list/container.jsx  |  4 +-
 .../disable-dialog/component.jsx              |  4 +-
 .../import-dialog/component.jsx               |  4 +-
 .../components/draggable-row/component.jsx    |  6 +-
 .../components/form/component.jsx             |  4 +-
 .../components/header-values/component.jsx    |  4 +-
 .../pages/admin/lookups-form/container.jsx    |  4 +-
 .../pages/admin/lookups-list/component.jsx    |  4 +-
 .../pages/admin/roles-form/container.jsx      |  4 +-
 .../admin/roles-form/forms/action-buttons.jsx |  4 +-
 .../roles-form/roles-actions/component.jsx    |  4 +-
 .../pages/admin/roles-list/container.jsx      |  4 +-
 .../admin/user-groups-form/container.jsx      |  4 +-
 .../admin/user-groups-list/container.jsx      |  4 +-
 .../pages/admin/users-form/container.jsx      |  4 +-
 .../user-confirmation/component.jsx           |  6 +-
 .../pages/admin/users-list/container.jsx      |  4 +-
 .../components/approvals/component.jsx        |  4 +-
 .../cases-by-social-worker/component.jsx      |  4 +-
 .../components/cases-to-assign/component.jsx  |  4 +-
 .../dashboard/components/flags/component.jsx  |  4 +-
 .../components/overdue-tasks/component.jsx    |  4 +-
 .../components/overview/component.jsx         |  4 +-
 .../component.jsx                             |  4 +-
 .../protection-concern/component.jsx          |  4 +-
 .../reporting-location/component.jsx          |  4 +-
 .../shared-from-my-team/component.jsx         |  4 +-
 .../shared-with-my-team/component.jsx         |  4 +-
 .../violations-category-region/component.jsx  |  4 +-
 .../component.jsx                             |  4 +-
 .../workflow-individual-cases/component.jsx   |  4 +-
 .../components/workflow-step.jsx              |  4 +-
 .../workflow-team-cases/component.jsx         |  4 +-
 .../components/pages/dashboard/container.jsx  |  4 +-
 .../pages/errors/not-authorized/component.jsx |  4 +-
 .../pages/errors/not-found/component.jsx      |  4 +-
 .../pages/export-list/container.jsx           |  4 +-
 .../pages/potential-matches/container.jsx     |  4 +-
 .../components/pages/support/component.jsx    |  4 +-
 .../components/code-of-conduct/component.jsx  |  4 +-
 .../components/navigation/component.jsx       |  4 +-
 .../components/terms-of-use/component.jsx     |  4 +-
 .../components/pages/task-list/container.jsx  |  4 +-
 .../password-reset-confirmation/component.jsx |  4 +-
 .../components/password-reset/component.jsx   |  4 +-
 .../components/key-value-cell/component.jsx   |  6 +-
 .../components/logos/component.jsx            |  4 +-
 .../components/render-table/component.js      |  4 +-
 .../components/signatures/component.jsx       |  4 +-
 .../components/table/component.jsx            |  4 +-
 .../components/permissions/component.js       |  4 +-
 .../record-actions/add-incident/component.jsx |  4 +-
 .../add-incident/fields/component.jsx         |  4 +-
 .../record-actions/add-service/component.jsx  |  4 +-
 .../components/record-actions/container.jsx   | 12 +--
 .../record-actions/exports/component.jsx      |  6 +-
 .../link-incident-to-case/component.jsx       |  4 +-
 .../mark-for-offline/component.jsx            |  4 +-
 .../record-actions/notes/component.jsx        |  4 +-
 .../request-approval/approval-form.jsx        |  6 +-
 .../request-approval/component.jsx            |  6 +-
 .../toggle-enable/component.jsx               |  4 +-
 .../record-actions/toggle-open/component.jsx  |  4 +-
 .../record-actions/transitions/component.jsx  |  6 +-
 .../transitions/components/reassign-form.jsx  |  6 +-
 .../components/referrals/component.jsx        |  6 +-
 .../components/referrals/form-internal.jsx    |  4 +-
 .../components/referrals/main-form.jsx        |  4 +-
 .../components/referrals/main-form.spec.js    |  4 +-
 .../referrals/on-change-refer-anyway.jsx      |  2 +-
 .../components/referrals/provided-consent.jsx |  4 +-
 .../components/referrals/provided-form.jsx    |  4 +-
 .../components/transfers/component.jsx        |  6 +-
 .../components/transition-dialog.jsx          |  6 +-
 .../transitions/referrals/component.jsx       |  6 +-
 .../components/consent-provided/component.jsx |  4 +-
 .../record-creation-flow/component.jsx        |  4 +-
 .../components/consent-prompt/component.jsx   |  6 +-
 .../components/search-prompt/component.jsx    |  6 +-
 .../record-form-alerts/component.jsx          |  4 +-
 .../components/record-form/component.jsx      |  6 +-
 .../components/render-form-sections.spec.js   |  4 +-
 .../components/record-form/container.jsx      |  4 +-
 .../components/disabled-record-indicator.jsx  |  4 +-
 .../form/components/guiding-questions.jsx     |  4 +-
 .../form/components/sync-record.jsx           |  4 +-
 .../form/components/validation-errors.jsx     |  4 +-
 .../form/components/workflow-indicator.jsx    |  4 +-
 .../attachments/attachment-field.jsx          |  4 +-
 .../attachments/attachment-input.jsx          |  4 +-
 .../attachments/attachment-label.jsx          |  4 +-
 .../attachments/attachment-preview.jsx        |  4 +-
 .../field-types/attachments/component.jsx     |  4 +-
 .../attachments/document-field.jsx            |  6 +-
 .../field-types/attachments/photo-array.jsx   |  4 +-
 .../attachments/render-preview.jsx            |  1 +
 .../form/field-types/date-field-picker.jsx    |  6 +-
 .../form/field-types/date-field.jsx           |  4 +-
 .../form/field-types/link-to-form.jsx         |  4 +-
 .../form/field-types/radio-field.jsx          |  4 +-
 .../field-types/select-field-container.jsx    |  6 +-
 .../form/field-types/select-field.jsx         |  6 +-
 .../form/field-types/seperator.jsx            |  4 +-
 .../field-types/tally-field-container.jsx     |  4 +-
 .../form/field-types/tally-field.jsx          |  4 +-
 .../form/field-types/text-field.jsx           |  4 +-
 .../form/field-types/tick-field.jsx           |  4 +-
 .../record-form/form/form-section-field.jsx   |  6 +-
 .../record-form/form/formik-form.jsx          |  6 +-
 .../record-form/form/page-heading.jsx         |  6 +-
 .../record-form/form/record-form-title.jsx    |  4 +-
 .../record-form/form/record-form-toolbar.jsx  |  6 +-
 .../record-form/form/record-form.jsx          |  6 +-
 .../subforms/services-subform/component.jsx   |  6 +-
 .../subforms/subform-add-entry/component.jsx  |  6 +-
 .../form/subforms/subform-chip/component.jsx  |  4 +-
 .../subform-dialog-fields/component.jsx       |  6 +-
 .../subforms/subform-dialog/component.jsx     |  6 +-
 .../subform-drawer-actions/component.jsx      |  4 +-
 .../subforms/subform-drawer/component.jsx     |  4 +-
 .../subforms/subform-empty-data/component.jsx |  4 +-
 .../subforms/subform-errors/component.jsx     |  4 +-
 .../subform-field-array/component.jsx         |  6 +-
 .../subform-field-subform/component.jsx       |  4 +-
 .../subforms/subform-fields/component.jsx     |  6 +-
 .../tracing-request-status/component.jsx      |  4 +-
 .../components/violation-item/component.jsx   |  4 +-
 .../components/violation-item/select.jsx      |  4 +-
 .../components/violation-title/component.jsx  |  4 +-
 .../subform-header-date/component.jsx         |  4 +-
 .../subform-header-lookup/component.jsx       |  6 +-
 .../subform-header-tally/component.jsx        |  4 +-
 .../subform-header-tickbox/component.jsx      |  4 +-
 .../subforms/subform-header/component.jsx     |  6 +-
 .../list-item-text-secondary/component.jsx    |  4 +-
 .../form/subforms/subform-item/component.jsx  |  6 +-
 .../form/subforms/subform-menu/component.jsx  |  4 +-
 .../subform-menu/components/refer-action.js   |  4 +-
 .../subforms/subform-traces/component.jsx     |  4 +-
 .../components/compared-forms/component.jsx   |  4 +-
 .../components/field-row/component.jsx        |  4 +-
 .../components/field-rows/component.jsx       |  4 +-
 .../components/trace-actions/component.jsx    |  4 +-
 .../trace-comparison-form/component.jsx       |  6 +-
 .../components/trace-form/component.jsx       |  4 +-
 .../components/trace-matches/component.jsx    |  4 +-
 .../components/record-form/nav/component.jsx  |  6 +-
 .../nav/components/close-button-nav-bar.jsx   |  4 +-
 .../nav/components/form-groups.jsx            |  6 +-
 .../nav/components/nav-group/component.jsx    |  6 +-
 .../nav/components/nav-item/component.jsx     |  6 +-
 .../record-information/component.jsx          |  4 +-
 .../record-information/component.spec.js      |  4 +-
 .../record-list/add-record-menu.jsx           |  4 +-
 .../components/date-column/component.jsx      |  4 +-
 .../components/filter-container/component.jsx |  4 +-
 .../photo-column-body/component.jsx           | 12 +--
 .../components/record-list/container.jsx      |  4 +-
 .../create-record-dialog/component.jsx        |  4 +-
 .../record-list-toolbar/component.jsx         |  4 +-
 .../record-list/view-modal/component.jsx      |  4 +-
 .../view-modal/transfer-request/component.jsx |  4 +-
 .../transfer-request/request-form.jsx         |  4 +-
 .../components/record-owner/component.jsx     |  4 +-
 .../components/report/components/exporter.jsx |  4 +-
 .../components/report/container.jsx           |  4 +-
 .../components/filter-applied/component.jsx   |  6 +-
 .../components/filters-dialog/component.jsx   |  4 +-
 .../components/filters-list/component.jsx     |  6 +-
 .../components/filters/component.jsx          |  6 +-
 .../components/reports-form/container.jsx     |  4 +-
 .../components/reports-list/container.jsx     |  4 +-
 .../save-and-redirect-dialog/component.jsx    |  6 +-
 .../saved-searches/ListSavedSearches.jsx      |  4 +-
 .../saved-searches/SavedSearchesForm.jsx      |  4 +-
 .../components/saved-searches/component.jsx   |  4 +-
 .../components/form-errors/component.jsx      |  4 +-
 .../searchable-select/component.jsx           |  6 +-
 .../session-timeout-dialog/component.jsx      |  4 +-
 .../summary-incident-mrm/component.jsx        |  4 +-
 .../component.jsx                             |  4 +-
 .../components/summary-fields/component.jsx   |  4 +-
 .../violations-subforms/component.jsx         |  4 +-
 .../components/summary/component.jsx          |  4 +-
 .../components/comparison-form/component.jsx  |  4 +-
 .../components/matched-traces/component.jsx   |  4 +-
 .../matched-trace-panel/component.jsx         |  4 +-
 .../components/matches-form/component.jsx     |  4 +-
 .../components/tooltip/component.jsx          |  4 +-
 .../components/tooltip/component.spec.js      | 24 +++---
 .../transitions/TransitionPanel.jsx           |  4 +-
 .../transitions/TransitionStatus.jsx          |  4 +-
 .../assignments/AssignmentsDetails.jsx        |  4 +-
 .../assignments/AssignmentsSummary.jsx        |  4 +-
 .../date-transitions-summary/component.jsx    |  4 +-
 .../components/date-transitions/component.jsx |  4 +-
 .../components/menu-actions/component.jsx     |  4 +-
 .../components/revoke-modal/component.jsx     |  4 +-
 .../components/transitions/container.jsx      |  6 +-
 .../transitions/referrals/details.jsx         |  4 +-
 .../referrals/referral-action-menu.js         |  4 +-
 .../referrals/referral-action/component.jsx   |  6 +-
 .../referrals/render-icon-value.jsx           |  1 +
 .../transitions/referrals/summary.jsx         |  4 +-
 .../components/transitions/render-details.jsx |  1 +
 .../components/transitions/render-summary.jsx |  1 +
 .../transitions/render-transition.jsx         |  1 +
 .../transitions/transfer_requests/details.jsx |  4 +-
 .../transitions/transfer_requests/summary.jsx |  4 +-
 .../transitions/transfers/TransferDetails.jsx |  4 +-
 .../transitions/transfers/TransferSummary.jsx |  4 +-
 .../transfers/render-icon-value.jsx           |  1 +
 .../transfers/transfer-action-menu.jsx        |  4 +-
 .../transfers/transfer-approval/component.js  |  6 +-
 .../translations-dialog/component.jsx         |  4 +-
 .../translations-toggle/component.jsx         |  4 +-
 .../components/user-actions/component.jsx     |  4 +-
 app/javascript/libs/conditional-wrapper.js    |  4 +-
 .../test-utils/mounted-form-component.js      |  4 +-
 .../test-utils/mounted-theme-component.js     |  4 +-
 app/javascript/theme-provider.jsx             |  4 +-
 458 files changed, 1087 insertions(+), 1073 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 14591f112e..df3498093a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
     "react/display-name": ["error", { ignoreTranspilerName: true }],
     "react/forbid-prop-types": "off",
     "react/jsx-props-no-spreading": "off",
-    "react/jsx-sort-default-props": [
+    "react/sort-default-props": [
       "error",
       {
         ignoreCase: true
@@ -65,7 +65,7 @@ module.exports = {
     "import/no-extraneous-dependencies": "off",
     "default-param-last": "off",
     "arrow-body-style": "off",
-    "react/function-component-definition": "off",
+    "react/function-component-definition": [2, { namedComponents: "function-declaration" }],
     "no-restricted-exports": "off",
     "no-import-assign": "off",
     "react/jsx-no-useless-fragment": "off",
diff --git a/app/javascript/app.jsx b/app/javascript/app.jsx
index 4a0e8d25a8..8b02551098 100644
--- a/app/javascript/app.jsx
+++ b/app/javascript/app.jsx
@@ -19,7 +19,7 @@ import appInit from "./app-init";
 
 const { store } = appInit();
 
-const App = () => {
+function App() {
   window.I18n.fallbacks = true;
 
   useLayoutEffect(() => {
@@ -51,7 +51,7 @@ const App = () => {
       </ThemeProvider>
     </Provider>
   );
-};
+}
 
 App.displayName = "App";
 
diff --git a/app/javascript/components/action-button/components/default-button/component.jsx b/app/javascript/components/action-button/components/default-button/component.jsx
index ba03774f0e..71b58e204a 100644
--- a/app/javascript/components/action-button/components/default-button/component.jsx
+++ b/app/javascript/components/action-button/components/default-button/component.jsx
@@ -10,7 +10,7 @@ import ButtonText from "../../../button-text";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   id,
   icon,
   cancel,
@@ -22,7 +22,7 @@ const Component = ({
   tooltip,
   rest,
   ...options
-}) => {
+}) {
   const renderIcon = icon || null;
   const isPending = Boolean(pending);
   const renderLoadingIndicator = isPending && <CircularProgress size={24} className={css.buttonProgress} />;
@@ -62,7 +62,7 @@ const Component = ({
       </span>
     </Parent>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/action-button/components/icon-button/component.jsx b/app/javascript/components/action-button/components/icon-button/component.jsx
index 64fefb7fa6..e5e5a5cb32 100644
--- a/app/javascript/components/action-button/components/icon-button/component.jsx
+++ b/app/javascript/components/action-button/components/icon-button/component.jsx
@@ -8,7 +8,7 @@ import { IconButton, Tooltip } from "@mui/material";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ icon, id, rest, ...otherProps }) => {
+function Component({ icon, id, rest, ...otherProps }) {
   const { tooltip } = otherProps;
   const Parent = tooltip ? Tooltip : Fragment;
   const spanClasses = clsx({ [css.isDisabled]: rest.disabled });
@@ -22,7 +22,7 @@ const Component = ({ icon, id, rest, ...otherProps }) => {
       </span>
     </Parent>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/action-button/components/link/component.jsx b/app/javascript/components/action-button/components/link/component.jsx
index 995e6e0e04..e5ebaab40c 100644
--- a/app/javascript/components/action-button/components/link/component.jsx
+++ b/app/javascript/components/action-button/components/link/component.jsx
@@ -5,7 +5,7 @@ import { Link } from "@mui/material";
 
 import { NAME } from "./constants";
 
-const Component = ({ text, id, ...options }) => {
+function Component({ text, id, ...options }) {
   const { rest, ...remainder } = options;
 
   if (rest.disabled) {
@@ -17,7 +17,7 @@ const Component = ({ text, id, ...options }) => {
       {text}
     </Link>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/action-dialog/component.jsx b/app/javascript/components/action-dialog/component.jsx
index 101e7cbca7..9a4904e65f 100644
--- a/app/javascript/components/action-dialog/component.jsx
+++ b/app/javascript/components/action-dialog/component.jsx
@@ -17,7 +17,7 @@ import css from "./styles.css";
 import { clearDialog } from "./action-creators";
 import { getAsyncLoading } from "./selectors";
 
-const ActionDialog = ({
+function ActionDialog({
   cancelButtonProps = {},
   cancelHandler,
   children,
@@ -42,7 +42,7 @@ const ActionDialog = ({
   fetchAction,
   fetchArgs = [],
   fetchLoadingPath
-}) => {
+}) {
   const dispatch = useDispatch();
 
   const { disabledApplication } = useApp();
@@ -166,7 +166,7 @@ const ActionDialog = ({
       </Dialog>
     </div>
   );
-};
+}
 
 ActionDialog.displayName = "ActionDialog";
 
diff --git a/app/javascript/components/action-dialog/components/text-with-close/component.jsx b/app/javascript/components/action-dialog/components/text-with-close/component.jsx
index 5a9c138979..d297884836 100644
--- a/app/javascript/components/action-dialog/components/text-with-close/component.jsx
+++ b/app/javascript/components/action-dialog/components/text-with-close/component.jsx
@@ -7,7 +7,7 @@ import { DialogTitle, IconButton } from "@mui/material";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, disableClose = false }) => {
+function Component({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, disableClose = false }) {
   const subtitle = dialogSubtitle ? <span className={css.dialogSubtitle}>{dialogSubtitle}</span> : null;
 
   return (
@@ -28,7 +28,7 @@ const Component = ({ dialogTitle, dialogSubtitle, closeHandler, dialogActions, d
       </div>
     </DialogTitle>
   );
-};
+}
 
 Component.propTypes = {
   closeHandler: PropTypes.func.isRequired,
diff --git a/app/javascript/components/activity-log/component.jsx b/app/javascript/components/activity-log/component.jsx
index 0f47dea50f..6619e66071 100644
--- a/app/javascript/components/activity-log/component.jsx
+++ b/app/javascript/components/activity-log/component.jsx
@@ -15,7 +15,7 @@ import { getColumns, getRecordPath } from "./utils";
 import { fetchActivityLog, setActivityLogsFilter } from "./action-creators";
 import css from "./styles.css";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const recordType = RESOURCES.activity_logs;
@@ -67,7 +67,7 @@ const Component = () => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 Component.displayName = "ActivityLog";
 
diff --git a/app/javascript/components/activity-log/components/activity-item/component.jsx b/app/javascript/components/activity-log/components/activity-item/component.jsx
index 39ed2353f8..bcc829d9c1 100644
--- a/app/javascript/components/activity-log/components/activity-item/component.jsx
+++ b/app/javascript/components/activity-log/components/activity-item/component.jsx
@@ -9,7 +9,7 @@ import getActivityMessage from "../../utils/get-activity-message";
 
 import css from "./styles.css";
 
-const Component = ({ activityData }) => {
+function Component({ activityData }) {
   const i18n = useI18n();
   const classes = clsx(css.activityContainer, {
     [css.disabledItem]: activityData.recordAccessDenied
@@ -36,7 +36,7 @@ const Component = ({ activityData }) => {
       <div className={css.type}>{i18n.t(`${type}.label`)}</div>
     </div>
   );
-};
+}
 
 Component.displayName = "ActivityItem";
 
diff --git a/app/javascript/components/application-routes/app-route.jsx b/app/javascript/components/application-routes/app-route.jsx
index af1d409bf7..9ca5877417 100644
--- a/app/javascript/components/application-routes/app-route.jsx
+++ b/app/javascript/components/application-routes/app-route.jsx
@@ -6,7 +6,7 @@ import Layouts from "../layouts";
 
 import SubRoutes from "./sub-routes";
 
-const AppRoute = ({ route }) => {
+function AppRoute({ route }) {
   const { layout, component: Component, extraProps, ...routeProps } = route;
 
   if (layout) {
@@ -18,7 +18,7 @@ const AppRoute = ({ route }) => {
   }
 
   return <Component {...routeProps} {...extraProps} />;
-};
+}
 
 AppRoute.displayName = "AppRoute";
 
diff --git a/app/javascript/components/application-routes/component.jsx b/app/javascript/components/application-routes/component.jsx
index 60855a1bdf..c620da0530 100644
--- a/app/javascript/components/application-routes/component.jsx
+++ b/app/javascript/components/application-routes/component.jsx
@@ -5,7 +5,7 @@ import { Route, Switch } from "react-router-dom";
 
 import AppRoute from "./app-route";
 
-const ApplicationRoutes = ({ routes }) => {
+function ApplicationRoutes({ routes }) {
   const appRoutes = routes.map((route, index) => {
     const { routes: subRoutes, exact, path } = route;
 
@@ -23,7 +23,7 @@ const ApplicationRoutes = ({ routes }) => {
   });
 
   return <Switch>{appRoutes}</Switch>;
-};
+}
 
 ApplicationRoutes.displayName = "ApplicationRoutes";
 
diff --git a/app/javascript/components/application-routes/sub-route.jsx b/app/javascript/components/application-routes/sub-route.jsx
index 2964d55a13..6bd3745145 100644
--- a/app/javascript/components/application-routes/sub-route.jsx
+++ b/app/javascript/components/application-routes/sub-route.jsx
@@ -11,7 +11,7 @@ import Permission from "../permissions";
 import { getCodeOfConductEnabled, getCodesOfConduct } from "../application/selectors";
 import { getCodeOfConductId } from "../user";
 
-const SubRoute = ({ subRoute }) => {
+function SubRoute({ subRoute }) {
   const { path, resources, actions, component: Component, extraProps } = subRoute;
 
   const codeOfConductAccepted = useMemoizedSelector(state => getCodeOfConductId(state));
@@ -38,7 +38,7 @@ const SubRoute = ({ subRoute }) => {
       </Permission>
     </ErrorBoundary>
   );
-};
+}
 
 SubRoute.displayName = "SubRoute";
 
diff --git a/app/javascript/components/application/use-app.jsx b/app/javascript/components/application/use-app.jsx
index a82a97b3fc..e6f0eb6534 100644
--- a/app/javascript/components/application/use-app.jsx
+++ b/app/javascript/components/application/use-app.jsx
@@ -11,13 +11,13 @@ import { getAppData } from "./selectors";
 
 const Context = createContext();
 
-const ApplicationProvider = ({ children }) => {
+function ApplicationProvider({ children }) {
   const { online, fieldMode } = useConnectivityStatus();
 
   const appData = useMemoizedSelector(state => getAppData(state), isEqual);
 
   return <Context.Provider value={{ ...appData, online, fieldMode }}>{children}</Context.Provider>;
-};
+}
 
 ApplicationProvider.displayName = "ApplicationProvider";
 
diff --git a/app/javascript/components/approvals/components/detail/component.jsx b/app/javascript/components/approvals/components/detail/component.jsx
index fedfa03ac3..f638ca9bae 100644
--- a/app/javascript/components/approvals/components/detail/component.jsx
+++ b/app/javascript/components/approvals/components/detail/component.jsx
@@ -9,7 +9,7 @@ import { useApp } from "../../../application";
 
 import { approvalLabel } from "./utils";
 
-const Component = ({ approvalSubform, isRequest, isResponse }) => {
+function Component({ approvalSubform, isRequest, isResponse }) {
   const { approvalsLabels } = useApp();
 
   const renderApprovalLabel =
@@ -53,7 +53,7 @@ const Component = ({ approvalSubform, isRequest, isResponse }) => {
       </Grid>
     </>
   );
-};
+}
 
 Component.displayName = NAME_DETAIL;
 
diff --git a/app/javascript/components/approvals/components/panel/component.jsx b/app/javascript/components/approvals/components/panel/component.jsx
index 31bd04d7c6..336730cc67 100644
--- a/app/javascript/components/approvals/components/panel/component.jsx
+++ b/app/javascript/components/approvals/components/panel/component.jsx
@@ -9,7 +9,7 @@ import ApprovalSummary from "../summary";
 import ApprovalDetail from "../detail";
 import { NAME_PANEL } from "../../constants";
 
-const Component = ({ approvalSubform, css }) => {
+function Component({ approvalSubform, css }) {
   const [expanded, setExpanded] = useState(false);
 
   const handleExpanded = () => {
@@ -45,7 +45,7 @@ const Component = ({ approvalSubform, css }) => {
       </Accordion>
     </div>
   );
-};
+}
 
 Component.displayName = NAME_PANEL;
 
diff --git a/app/javascript/components/approvals/components/summary/component.jsx b/app/javascript/components/approvals/components/summary/component.jsx
index 258794554e..77a5297ae2 100644
--- a/app/javascript/components/approvals/components/summary/component.jsx
+++ b/app/javascript/components/approvals/components/summary/component.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../i18n";
 import { NAME_SUMMARY } from "../../constants";
 import { useApp } from "../../../application";
 
-const Component = ({ approvalSubform, css, isRequest, isResponse }) => {
+function Component({ approvalSubform, css, isRequest, isResponse }) {
   const i18n = useI18n();
   const { approvalsLabels } = useApp();
   const status = approvalSubform.get("approval_status");
@@ -56,7 +56,7 @@ const Component = ({ approvalSubform, css, isRequest, isResponse }) => {
       {renderStatus}
     </Grid>
   );
-};
+}
 
 Component.displayName = NAME_SUMMARY;
 
diff --git a/app/javascript/components/approvals/container.jsx b/app/javascript/components/approvals/container.jsx
index 9b2a8d0a23..8b3f94167d 100644
--- a/app/javascript/components/approvals/container.jsx
+++ b/app/javascript/components/approvals/container.jsx
@@ -9,7 +9,7 @@ import css from "./styles.css";
 import { NAME } from "./constants";
 import ApprovalPanel from "./components/panel";
 
-const Container = ({ approvals, mobileDisplay, handleToggleNav }) => {
+function Container({ approvals, mobileDisplay, handleToggleNav }) {
   const i18n = useI18n();
 
   const renderApprovals =
@@ -34,7 +34,7 @@ const Container = ({ approvals, mobileDisplay, handleToggleNav }) => {
       </div>
     </div>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/button-text/component.jsx b/app/javascript/components/button-text/component.jsx
index 1a4ad4ee81..d8faf97117 100644
--- a/app/javascript/components/button-text/component.jsx
+++ b/app/javascript/components/button-text/component.jsx
@@ -5,7 +5,7 @@ import { useMediaQuery } from "@mui/material";
 
 import { NAME } from "./constants";
 
-const Component = ({ text, keepTextOnMobile = false }) => {
+function Component({ text, keepTextOnMobile = false }) {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
 
   if (mobileDisplay && !keepTextOnMobile) {
@@ -13,7 +13,7 @@ const Component = ({ text, keepTextOnMobile = false }) => {
   }
 
   return <>{text}</>;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/change-logs/components/change-log-item/component.jsx b/app/javascript/components/change-logs/components/change-log-item/component.jsx
index 949149e77c..b0069707db 100644
--- a/app/javascript/components/change-logs/components/change-log-item/component.jsx
+++ b/app/javascript/components/change-logs/components/change-log-item/component.jsx
@@ -17,7 +17,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ item }) => {
+function Component({ item }) {
   const i18n = useI18n();
   const { onClick } = item;
   const renderMessage = change => (
@@ -62,7 +62,7 @@ const Component = ({ item }) => {
       </TimelineContent>
     </TimelineItem>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/change-logs/components/change-log/component.jsx b/app/javascript/components/change-logs/components/change-log/component.jsx
index 767632bdb6..d39ff40407 100644
--- a/app/javascript/components/change-logs/components/change-log/component.jsx
+++ b/app/javascript/components/change-logs/components/change-log/component.jsx
@@ -10,7 +10,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   recordChangeLogs,
   setOpen,
   setRecordChanges,
@@ -19,7 +19,7 @@ const Component = ({
   allLookups,
   locations,
   allAgencies
-}) => {
+}) {
   const i18n = useI18n();
 
   const handleSeeDetails = subformChanges => {
@@ -39,7 +39,7 @@ const Component = ({
   ).map(item => <ChangeLogItem item={item} key={item.key} />);
 
   return <Timeline classes={{ root: css.root }}>{renderItems}</Timeline>;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/change-logs/components/subform-dialog/component.jsx b/app/javascript/components/change-logs/components/subform-dialog/component.jsx
index 7341a47dc4..0f40cee55f 100644
--- a/app/javascript/components/change-logs/components/subform-dialog/component.jsx
+++ b/app/javascript/components/change-logs/components/subform-dialog/component.jsx
@@ -13,7 +13,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   recordChanges,
   open,
   setOpen,
@@ -23,7 +23,7 @@ const Component = ({
   locations,
   setCalculatingChangeLog,
   allAgencies
-}) => {
+}) {
   const i18n = useI18n();
 
   const subformTitle = i18n.t("change_logs.changes_subform", {
@@ -60,7 +60,7 @@ const Component = ({
       </ActionDialog>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/change-logs/container.jsx b/app/javascript/components/change-logs/container.jsx
index e8c06f56b2..8a8236ac4d 100644
--- a/app/javascript/components/change-logs/container.jsx
+++ b/app/javascript/components/change-logs/container.jsx
@@ -21,7 +21,7 @@ import { NAME } from "./constants";
 import { getChangeLogs } from "./selectors";
 import css from "./styles.css";
 
-const Container = ({
+function Container({
   selectedForm,
   recordID,
   recordType,
@@ -29,7 +29,7 @@ const Container = ({
   mobileDisplay,
   handleToggleNav,
   fetchable = false
-}) => {
+}) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -82,7 +82,7 @@ const Container = ({
       />
     </div>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/charts/bar-chart/component.jsx b/app/javascript/components/charts/bar-chart/component.jsx
index 6490dbb745..84a34c2a8c 100644
--- a/app/javascript/components/charts/bar-chart/component.jsx
+++ b/app/javascript/components/charts/bar-chart/component.jsx
@@ -7,7 +7,7 @@ import arrayReverse from "lodash/reverse";
 
 import css from "./styles.css";
 
-const BarChart = ({ data, description, showDetails = false, hideLegend = false, reverse = false }) => {
+function BarChart({ data, description, showDetails = false, hideLegend = false, reverse = false }) {
   const chartRef = createRef();
 
   useEffect(() => {
@@ -92,7 +92,7 @@ const BarChart = ({ data, description, showDetails = false, hideLegend = false,
       <canvas id="reportGraph" data-testid="canvas" ref={chartRef} height={!showDetails ? null : 400} />
     </div>
   );
-};
+}
 
 BarChart.displayName = "BarChart";
 
diff --git a/app/javascript/components/charts/table-values/component.jsx b/app/javascript/components/charts/table-values/component.jsx
index 6f0a981bf7..4024fff465 100644
--- a/app/javascript/components/charts/table-values/component.jsx
+++ b/app/javascript/components/charts/table-values/component.jsx
@@ -10,7 +10,7 @@ import InsightsTableHeader from "../../insights-sub-report/components/insights-t
 import { TableHeader, TableRows } from "./components";
 import css from "./styles.css";
 
-const TableValues = ({
+function TableValues({
   columns,
   values,
   showPlaceholder = false,
@@ -18,7 +18,7 @@ const TableValues = ({
   emptyMessage = "",
   useInsightsHeader = false,
   subColumnItemsSize
-}) => {
+}) {
   const Header = useInsightsHeader ? InsightsTableHeader : TableHeader;
 
   return (
@@ -37,7 +37,7 @@ const TableValues = ({
       )}
     </Paper>
   );
-};
+}
 
 TableValues.displayName = "TableValues";
 
diff --git a/app/javascript/components/charts/table-values/components/table-header/component.jsx b/app/javascript/components/charts/table-values/components/table-header/component.jsx
index 144c4d1527..dc654ae39e 100644
--- a/app/javascript/components/charts/table-values/components/table-header/component.jsx
+++ b/app/javascript/components/charts/table-values/components/table-header/component.jsx
@@ -12,7 +12,7 @@ import css from "./styles.css";
 import { emptyColumn } from "./utils";
 import { NAME } from "./constants";
 
-const TableHeader = ({ columns }) => {
+function TableHeader({ columns }) {
   const i18n = useI18n();
 
   let newColumns = columns;
@@ -76,7 +76,7 @@ const TableHeader = ({ columns }) => {
       })}
     </>
   );
-};
+}
 
 TableHeader.displayName = NAME;
 
diff --git a/app/javascript/components/charts/table-values/components/table-rows/component.jsx b/app/javascript/components/charts/table-values/components/table-rows/component.jsx
index 647ae1e5df..91d840f5d0 100644
--- a/app/javascript/components/charts/table-values/components/table-rows/component.jsx
+++ b/app/javascript/components/charts/table-values/components/table-rows/component.jsx
@@ -10,7 +10,7 @@ import generateKey from "../../utils";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ values = [], subColumnItemsSize }) => {
+function Component({ values = [], subColumnItemsSize }) {
   const i18n = useI18n();
   const totalText = i18n.t("managed_reports.total");
 
@@ -37,7 +37,7 @@ const Component = ({ values = [], subColumnItemsSize }) => {
       </TableRow>
     );
   });
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/code-of-conduct/component.jsx b/app/javascript/components/code-of-conduct/component.jsx
index 96ccda896d..9feb6cc885 100644
--- a/app/javascript/components/code-of-conduct/component.jsx
+++ b/app/javascript/components/code-of-conduct/component.jsx
@@ -22,7 +22,7 @@ import { acceptCodeOfConduct } from "./action-creators";
 import { selectUpdatingCodeOfConduct } from "./selectors";
 import { Actions, CancelDialog } from "./components";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const location = useLocation();
@@ -82,7 +82,7 @@ const Component = () => {
       </div>
     </LoadingIndicator>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/code-of-conduct/components/actions/component.jsx b/app/javascript/components/code-of-conduct/components/actions/component.jsx
index f1b04ba12e..b1fbba97ac 100644
--- a/app/javascript/components/code-of-conduct/components/actions/component.jsx
+++ b/app/javascript/components/code-of-conduct/components/actions/component.jsx
@@ -9,7 +9,7 @@ import { ACTION_BUTTON_TYPES } from "../../../action-button/constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ css, handleAccept, handleCancel, updatingCodeOfConduct, codeOfConductAccepted }) => {
+function Component({ css, handleAccept, handleCancel, updatingCodeOfConduct, codeOfConductAccepted }) {
   return (
     <div className={css.actions}>
       <ActionButton
@@ -36,7 +36,7 @@ const Component = ({ css, handleAccept, handleCancel, updatingCodeOfConduct, cod
       />
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/code-of-conduct/components/cancel-dialog/component.jsx b/app/javascript/components/code-of-conduct/components/cancel-dialog/component.jsx
index 472a01ea63..e406f5a9b0 100644
--- a/app/javascript/components/code-of-conduct/components/cancel-dialog/component.jsx
+++ b/app/javascript/components/code-of-conduct/components/cancel-dialog/component.jsx
@@ -9,7 +9,7 @@ import { ROUTES } from "../../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ dispatch, open, setOpen, i18n }) => {
+function Component({ dispatch, open, setOpen, i18n }) {
   const onClose = () => setOpen(false);
   const handleLogout = () => {
     dispatch(push(ROUTES.logout));
@@ -29,7 +29,7 @@ const Component = ({ dispatch, open, setOpen, i18n }) => {
       }}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/contact-information/container.jsx b/app/javascript/components/contact-information/container.jsx
index 4d2380adc1..44ddf428f5 100644
--- a/app/javascript/components/contact-information/container.jsx
+++ b/app/javascript/components/contact-information/container.jsx
@@ -8,7 +8,7 @@ import { BLACK_LISTED_FIELDS } from "./constants";
 import { selectSupportData } from "./selectors";
 import css from "./styles.css";
 
-const Support = () => {
+function Support() {
   const supportData = useMemoizedSelector(state => selectSupportData(state));
   const i18n = useI18n();
 
@@ -38,7 +38,7 @@ const Support = () => {
       {renderInformation}
     </>
   );
-};
+}
 
 Support.displayName = "Support";
 
diff --git a/app/javascript/components/custom-snackbar-provider/component.jsx b/app/javascript/components/custom-snackbar-provider/component.jsx
index eaf2278f98..d220e11368 100644
--- a/app/javascript/components/custom-snackbar-provider/component.jsx
+++ b/app/javascript/components/custom-snackbar-provider/component.jsx
@@ -10,7 +10,7 @@ import SignalWifiOffIcon from "@mui/icons-material/SignalWifiOff";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ children }) => {
+function Component({ children }) {
   return (
     <SnackbarProvider
       maxSnack={3}
@@ -34,7 +34,7 @@ const Component = ({ children }) => {
       {children}
     </SnackbarProvider>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/dashboard/action-menu/component.jsx b/app/javascript/components/dashboard/action-menu/component.jsx
index 5731be621b..8099be2e2d 100644
--- a/app/javascript/components/dashboard/action-menu/component.jsx
+++ b/app/javascript/components/dashboard/action-menu/component.jsx
@@ -7,7 +7,7 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 
 import css from "./styles.css";
 
-const ActionMenu = ({ open, onOpen, onClose, items }) => {
+function ActionMenu({ open, onOpen, onClose, items }) {
   const moreButtonRef = useRef(null);
 
   return (
@@ -43,7 +43,7 @@ const ActionMenu = ({ open, onOpen, onClose, items }) => {
       </Menu>
     </>
   );
-};
+}
 
 ActionMenu.displayName = "ActionMenu";
 
diff --git a/app/javascript/components/dashboard/badged-indicator/component.jsx b/app/javascript/components/dashboard/badged-indicator/component.jsx
index 2af06b236b..70258a562e 100644
--- a/app/javascript/components/dashboard/badged-indicator/component.jsx
+++ b/app/javascript/components/dashboard/badged-indicator/component.jsx
@@ -13,7 +13,7 @@ import NAMESPACE from "../../pages/dashboard/namespace";
 
 import css from "./styles.css";
 
-const BadgedIndicator = ({ data, lookup, sectionTitle, indicator, loading, errors }) => {
+function BadgedIndicator({ data, lookup, sectionTitle, indicator, loading, errors }) {
   const dispatch = useDispatch();
 
   const loadingIndicatorProps = {
@@ -55,7 +55,7 @@ const BadgedIndicator = ({ data, lookup, sectionTitle, indicator, loading, error
       </LoadingIndicator>
     </>
   );
-};
+}
 
 BadgedIndicator.displayName = "BadgedIndicator";
 
diff --git a/app/javascript/components/dashboard/dashboard-chip/component.jsx b/app/javascript/components/dashboard/dashboard-chip/component.jsx
index 25ed27a5f5..35928e47d1 100644
--- a/app/javascript/components/dashboard/dashboard-chip/component.jsx
+++ b/app/javascript/components/dashboard/dashboard-chip/component.jsx
@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 
 import css from "./styles.css";
 
-const DashboardChip = ({ label, type, handleClick }) => {
+function DashboardChip({ label, type, handleClick }) {
   const handler = typeof handleClick === "function" ? handleClick : null;
   const classes = clsx(css.chip, css[type]);
 
@@ -22,7 +22,7 @@ const DashboardChip = ({ label, type, handleClick }) => {
       {label}
     </Button>
   );
-};
+}
 
 DashboardChip.displayName = "DashboardChip";
 
diff --git a/app/javascript/components/dashboard/dashboard-table/component.jsx b/app/javascript/components/dashboard/dashboard-table/component.jsx
index 52a96facaa..dee468f35d 100644
--- a/app/javascript/components/dashboard/dashboard-table/component.jsx
+++ b/app/javascript/components/dashboard/dashboard-table/component.jsx
@@ -14,7 +14,7 @@ import { defaultTableOptions } from "../../index-table/utils";
 
 import css from "./styles.css";
 
-const DashboardTable = ({ columns, data, query, title, pathname }) => {
+function DashboardTable({ columns, data, query, title, pathname }) {
   const userPermissions = useMemoizedSelector(state => getPermissions(state));
   const clickableCell = [...userPermissions.keys()].includes(pathname.split("/")[1]);
 
@@ -70,7 +70,7 @@ const DashboardTable = ({ columns, data, query, title, pathname }) => {
       <MUIDataTable {...tableOptions} />
     </div>
   );
-};
+}
 
 DashboardTable.displayName = "DashboardTable";
 
diff --git a/app/javascript/components/dashboard/doughnut-chart/component.jsx b/app/javascript/components/dashboard/doughnut-chart/component.jsx
index ec044850ca..7de84d91f7 100644
--- a/app/javascript/components/dashboard/doughnut-chart/component.jsx
+++ b/app/javascript/components/dashboard/doughnut-chart/component.jsx
@@ -48,7 +48,7 @@ Chart.pluginService.register({
   }
 });
 
-const DoughnutChart = ({ chartData, options }) => {
+function DoughnutChart({ chartData, options }) {
   const chartRef = createRef();
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const DoughnutChart = ({ chartData, options }) => {
   });
 
   return <canvas className="doughnutChart" ref={chartRef} />;
-};
+}
 
 DoughnutChart.displayName = "DoughnutChart";
 
diff --git a/app/javascript/components/dashboard/flag-box/component.jsx b/app/javascript/components/dashboard/flag-box/component.jsx
index a116ff1d95..8ab981c4e8 100644
--- a/app/javascript/components/dashboard/flag-box/component.jsx
+++ b/app/javascript/components/dashboard/flag-box/component.jsx
@@ -8,7 +8,7 @@ import FlagBoxItem from "./components/flag-box-item";
 import { showId } from "./utils";
 import css from "./styles.css";
 
-const FlagBox = ({ flags }) => {
+function FlagBox({ flags }) {
   return (
     <div className={css.flagContainer}>
       {flags
@@ -25,7 +25,7 @@ const FlagBox = ({ flags }) => {
         .slice(0, 10)}
     </div>
   );
-};
+}
 
 FlagBox.displayName = "FlagBox";
 
diff --git a/app/javascript/components/dashboard/flag-box/components/flag-box-item/component.jsx b/app/javascript/components/dashboard/flag-box/components/flag-box-item/component.jsx
index f147712891..618a66bf70 100644
--- a/app/javascript/components/dashboard/flag-box/components/flag-box-item/component.jsx
+++ b/app/javascript/components/dashboard/flag-box/components/flag-box-item/component.jsx
@@ -12,7 +12,7 @@ import { UserArrowIcon } from "../../../../../images/primero-icons";
 
 import { NAME } from "./constants";
 
-const Component = ({ date, reason, recordId, title, user }) => {
+function Component({ date, reason, recordId, title, user }) {
   const dispatch = useDispatch();
   const handleFlagOpen = id => () => dispatch(push(`${RECORD_PATH.cases}/${id}`));
 
@@ -27,7 +27,7 @@ const Component = ({ date, reason, recordId, title, user }) => {
       </span>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/dashboard/flag-list/component.jsx b/app/javascript/components/dashboard/flag-list/component.jsx
index 9de4c9120f..162ba29665 100644
--- a/app/javascript/components/dashboard/flag-list/component.jsx
+++ b/app/javascript/components/dashboard/flag-list/component.jsx
@@ -8,7 +8,7 @@ import FlagBox from "../flag-box";
 
 import css from "./styles.css";
 
-const FlagList = ({ flags }) => {
+function FlagList({ flags }) {
   const i18n = useI18n();
 
   return (
@@ -21,7 +21,7 @@ const FlagList = ({ flags }) => {
       </NavLink>
     </div>
   );
-};
+}
 
 FlagList.displayName = "FlagList";
 
diff --git a/app/javascript/components/dashboard/line-chart/component.jsx b/app/javascript/components/dashboard/line-chart/component.jsx
index 4a73eed68c..c79dfb71ab 100644
--- a/app/javascript/components/dashboard/line-chart/component.jsx
+++ b/app/javascript/components/dashboard/line-chart/component.jsx
@@ -6,7 +6,7 @@ import { createRef, useEffect } from "react";
 
 import css from "./styles.css";
 
-const LineChart = ({ chartData, options, title }) => {
+function LineChart({ chartData, options, title }) {
   const chartRef = createRef();
 
   useEffect(() => {
@@ -79,7 +79,7 @@ const LineChart = ({ chartData, options, title }) => {
       <canvas className="lineChart" ref={chartRef} />
     </div>
   );
-};
+}
 
 LineChart.displayName = "LineChart";
 
diff --git a/app/javascript/components/dashboard/options-box/component.jsx b/app/javascript/components/dashboard/options-box/component.jsx
index d2f6f5e269..f808b39707 100644
--- a/app/javascript/components/dashboard/options-box/component.jsx
+++ b/app/javascript/components/dashboard/options-box/component.jsx
@@ -10,7 +10,7 @@ import { ConditionalWrapper } from "../../../libs";
 
 import css from "./styles.css";
 
-const OptionsBox = ({ title, action, children, to, flat, overlay, type = "", loading, errors, hasData = true }) => {
+function OptionsBox({ title, action, children, to, flat, overlay, type = "", loading, errors, hasData = true }) {
   const loadingIndicatorProps = {
     overlay,
     type,
@@ -47,7 +47,7 @@ const OptionsBox = ({ title, action, children, to, flat, overlay, type = "", loa
       </ConditionalWrapper>
     </Card>
   );
-};
+}
 
 OptionsBox.displayName = "OptionsBox";
 
diff --git a/app/javascript/components/dashboard/overview-box/component.jsx b/app/javascript/components/dashboard/overview-box/component.jsx
index 0f8843489b..dbbbceb3f3 100644
--- a/app/javascript/components/dashboard/overview-box/component.jsx
+++ b/app/javascript/components/dashboard/overview-box/component.jsx
@@ -18,7 +18,7 @@ import ActionButton from "../../action-button";
 
 import css from "./styles.css";
 
-const OverviewBox = ({ items, chartData, sumTitle, withTotal = true, loading, errors }) => {
+function OverviewBox({ items, chartData, sumTitle, withTotal = true, loading, errors }) {
   const i18n = useI18n();
   const { approvalsLabels } = useApp();
   const dispatch = useDispatch();
@@ -123,7 +123,7 @@ const OverviewBox = ({ items, chartData, sumTitle, withTotal = true, loading, er
   const renderOverviewBox = chartData ? renderWithChart() : renderItems();
 
   return <>{renderOverviewBox}</>;
-};
+}
 
 OverviewBox.displayName = "OverviewBox";
 
diff --git a/app/javascript/components/dashboard/pie-chart/component.jsx b/app/javascript/components/dashboard/pie-chart/component.jsx
index 81d788e813..26639f77a3 100644
--- a/app/javascript/components/dashboard/pie-chart/component.jsx
+++ b/app/javascript/components/dashboard/pie-chart/component.jsx
@@ -11,7 +11,7 @@ import { buildFilter } from "../utils";
 
 import { NAME, COLORS } from "./constants";
 
-const PieChart = ({ data, labels, query }) => {
+function PieChart({ data, labels, query }) {
   const dispatch = useDispatch();
   const chartRef = createRef();
 
@@ -60,7 +60,7 @@ const PieChart = ({ data, labels, query }) => {
   });
 
   return <canvas ref={chartRef} data-testid="pie-chart" />;
-};
+}
 
 PieChart.displayName = NAME;
 
diff --git a/app/javascript/components/dashboard/priority-summary/component.jsx b/app/javascript/components/dashboard/priority-summary/component.jsx
index e89769d261..9d1d351fe4 100644
--- a/app/javascript/components/dashboard/priority-summary/component.jsx
+++ b/app/javascript/components/dashboard/priority-summary/component.jsx
@@ -7,7 +7,7 @@ import DashboardChip from "../dashboard-chip";
 
 import css from "./styles.css";
 
-const PrioritySummary = ({ summary }) => {
+function PrioritySummary({ summary }) {
   const i18n = useI18n();
 
   const getTitle = status => {
@@ -51,7 +51,7 @@ const PrioritySummary = ({ summary }) => {
       </ul>
     </div>
   );
-};
+}
 
 PrioritySummary.displayName = "PrioritySummary";
 
diff --git a/app/javascript/components/dashboard/services/component.jsx b/app/javascript/components/dashboard/services/component.jsx
index 46bd16878d..b1fcdfcfc5 100644
--- a/app/javascript/components/dashboard/services/component.jsx
+++ b/app/javascript/components/dashboard/services/component.jsx
@@ -8,7 +8,7 @@ import OptionsBox from "../options-box";
 
 import css from "./styles.css";
 
-const Services = ({ servicesList }) => {
+function Services({ servicesList }) {
   const i18n = useI18n();
 
   const styleOverrides = {
@@ -34,7 +34,7 @@ const Services = ({ servicesList }) => {
       </OptionsBox>
     </>
   );
-};
+}
 
 Services.displayName = "Services";
 
diff --git a/app/javascript/components/demo-indicator/component.jsx b/app/javascript/components/demo-indicator/component.jsx
index 5c3a07bd9d..87a5dbc25e 100644
--- a/app/javascript/components/demo-indicator/component.jsx
+++ b/app/javascript/components/demo-indicator/component.jsx
@@ -10,7 +10,7 @@ import { DEMO } from "../application/constants";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ isDemo }) => {
+function Component({ isDemo }) {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
   const i18n = useI18n();
   const classes = { standardInfo: css.standardInfo, message: css.standardInfoText };
@@ -24,7 +24,7 @@ const Component = ({ isDemo }) => {
       {i18n.t(DEMO)}
     </Alert>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/disable-offline/component.jsx b/app/javascript/components/disable-offline/component.jsx
index 92a3da2486..180b3f4a0b 100644
--- a/app/javascript/components/disable-offline/component.jsx
+++ b/app/javascript/components/disable-offline/component.jsx
@@ -10,7 +10,7 @@ import { useI18n } from "../i18n";
 
 import css from "./styles.css";
 
-const Component = ({ overrideCondition = false, children, button = false, offlineTextKey = null }) => {
+function Component({ overrideCondition = false, children, button = false, offlineTextKey = null }) {
   const { online } = useApp();
   const i18n = useI18n();
   const classes = clsx(css.disabledLink, {
@@ -29,7 +29,7 @@ const Component = ({ overrideCondition = false, children, button = false, offlin
   }
 
   return children;
-};
+}
 
 Component.propTypes = {
   button: PropTypes.bool,
diff --git a/app/javascript/components/disable-offline/components/offline-alert/component.jsx b/app/javascript/components/disable-offline/components/offline-alert/component.jsx
index 9f394673e1..3ae33cf71c 100644
--- a/app/javascript/components/disable-offline/components/offline-alert/component.jsx
+++ b/app/javascript/components/disable-offline/components/offline-alert/component.jsx
@@ -8,7 +8,7 @@ import { useApp } from "../../../application";
 
 import css from "./styles.css";
 
-const Component = ({ text, noMargin }) => {
+function Component({ text, noMargin }) {
   const { online } = useApp();
 
   if (online) return null;
@@ -20,7 +20,7 @@ const Component = ({ text, noMargin }) => {
       </Alert>
     </div>
   );
-};
+}
 
 Component.displayName = "OfflineAlert";
 
diff --git a/app/javascript/components/display-data/component.jsx b/app/javascript/components/display-data/component.jsx
index 85ac8e4013..7ca2ea1429 100644
--- a/app/javascript/components/display-data/component.jsx
+++ b/app/javascript/components/display-data/component.jsx
@@ -7,7 +7,7 @@ import { useI18n } from "../i18n";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const DisplayData = ({ label, value }) => {
+function DisplayData({ label, value }) {
   const i18n = useI18n();
 
   return (
@@ -16,7 +16,7 @@ const DisplayData = ({ label, value }) => {
       <div className={css.value}>{value || "--"}</div>
     </div>
   );
-};
+}
 
 DisplayData.displayName = NAME;
 
diff --git a/app/javascript/components/error-boundary/components/error-state/component.jsx b/app/javascript/components/error-boundary/components/error-state/component.jsx
index b9b6e31c6a..b484267f48 100644
--- a/app/javascript/components/error-boundary/components/error-state/component.jsx
+++ b/app/javascript/components/error-boundary/components/error-state/component.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../../../i18n";
 
 import css from "./styles.css";
 
-const ErrorState = ({ errorMessage, handleTryAgain, type }) => {
+function ErrorState({ errorMessage, handleTryAgain, type }) {
   const i18n = useI18n();
 
   return (
@@ -28,7 +28,7 @@ const ErrorState = ({ errorMessage, handleTryAgain, type }) => {
       </div>
     </div>
   );
-};
+}
 
 ErrorState.displayName = "ErrorState";
 
diff --git a/app/javascript/components/flagging/component.jsx b/app/javascript/components/flagging/component.jsx
index 954f7ff8b5..5a4bf2d5b5 100644
--- a/app/javascript/components/flagging/component.jsx
+++ b/app/javascript/components/flagging/component.jsx
@@ -14,7 +14,7 @@ import { FlagDialog, FlagForm, ListFlags, Unflag } from "./components";
 import { FLAG_DIALOG, NAME } from "./constants";
 import { getSelectedFlag } from "./selectors";
 
-const Component = ({ control, record, recordType }) => {
+function Component({ control, record, recordType }) {
   const [tab, setTab] = useState(0);
   const { dialogOpen, setDialog } = useDialog(FLAG_DIALOG);
 
@@ -74,7 +74,7 @@ const Component = ({ control, record, recordType }) => {
       <Unflag flag={selectedFlag} />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/TabPanel.jsx b/app/javascript/components/flagging/components/TabPanel.jsx
index b3b11349a0..e67d882764 100644
--- a/app/javascript/components/flagging/components/TabPanel.jsx
+++ b/app/javascript/components/flagging/components/TabPanel.jsx
@@ -3,7 +3,7 @@
 import PropTypes from "prop-types";
 import { Box } from "@mui/material";
 
-const TabPanel = props => {
+function TabPanel(props) {
   const { children, value, index } = props;
 
   return (
@@ -16,7 +16,7 @@ const TabPanel = props => {
       {children}
     </Box>
   );
-};
+}
 
 TabPanel.displayName = "TabPanel";
 
diff --git a/app/javascript/components/flagging/components/dialog-tabs/component.jsx b/app/javascript/components/flagging/components/dialog-tabs/component.jsx
index 6c78e03eb6..f35f1175cc 100644
--- a/app/javascript/components/flagging/components/dialog-tabs/component.jsx
+++ b/app/javascript/components/flagging/components/dialog-tabs/component.jsx
@@ -9,7 +9,7 @@ import css from "../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ children, isBulkFlags, tab, setTab }) => {
+function Component({ children, isBulkFlags, tab, setTab }) {
   const i18n = useI18n();
 
   const tabs = [i18n.t("flags.flags_tab"), i18n.t("flags.add_flag_tab")];
@@ -53,7 +53,7 @@ const Component = ({ children, isBulkFlags, tab, setTab }) => {
   }
 
   return null;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/flag-dialog/component.jsx b/app/javascript/components/flagging/components/flag-dialog/component.jsx
index 4ceb89b36a..89d661e2aa 100644
--- a/app/javascript/components/flagging/components/flag-dialog/component.jsx
+++ b/app/javascript/components/flagging/components/flag-dialog/component.jsx
@@ -9,7 +9,7 @@ import { NAME as FORM_ID } from "../flag-form/constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ dialogOpen, fetchAction, fetchArgs, children, isBulkFlags, tab, setTab }) => {
+function Component({ dialogOpen, fetchAction, fetchArgs, children, isBulkFlags, tab, setTab }) {
   const i18n = useI18n();
 
   return (
@@ -31,7 +31,7 @@ const Component = ({ dialogOpen, fetchAction, fetchArgs, children, isBulkFlags,
       </DialogTabs>
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/flag-form/component.jsx b/app/javascript/components/flagging/components/flag-form/component.jsx
index 0601d2fe35..19efbf55a8 100644
--- a/app/javascript/components/flagging/components/flag-form/component.jsx
+++ b/app/javascript/components/flagging/components/flag-form/component.jsx
@@ -16,7 +16,7 @@ const initialValues = {
   message: ""
 };
 
-const Component = ({ recordType, record, handleActiveTab }) => {
+function Component({ recordType, record, handleActiveTab }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -39,7 +39,7 @@ const Component = ({ recordType, record, handleActiveTab }) => {
       resetAfterSubmit
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/list-flags-item-actions/component.jsx b/app/javascript/components/flagging/components/list-flags-item-actions/component.jsx
index 6dcd92f6e4..1992552e46 100644
--- a/app/javascript/components/flagging/components/list-flags-item-actions/component.jsx
+++ b/app/javascript/components/flagging/components/list-flags-item-actions/component.jsx
@@ -18,7 +18,7 @@ import { usePermissions, FLAG_RESOLVE_ANY } from "../../../permissions";
 
 import { NAME } from "./constants";
 
-const Component = ({ flag }) => {
+function Component({ flag }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const canResolveAnyFlag = usePermissions(flag?.record_type, FLAG_RESOLVE_ANY);
@@ -71,7 +71,7 @@ const Component = ({ flag }) => {
   );
 
   return renderActions;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/list-flags-item/component.jsx b/app/javascript/components/flagging/components/list-flags-item/component.jsx
index adfeeb18fe..7ddcad084f 100644
--- a/app/javascript/components/flagging/components/list-flags-item/component.jsx
+++ b/app/javascript/components/flagging/components/list-flags-item/component.jsx
@@ -10,7 +10,7 @@ import ListFlagsItemActions from "../list-flags-item-actions";
 
 import { NAME } from "./constants";
 
-const Component = ({ flag }) => {
+function Component({ flag }) {
   const itemClass = flag?.removed ? css.itemResolved : css.item;
 
   if (!flag) {
@@ -39,7 +39,7 @@ const Component = ({ flag }) => {
       <Divider component="li" />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/list-flags/component.jsx b/app/javascript/components/flagging/components/list-flags/component.jsx
index 888d6bef05..d243d648b0 100644
--- a/app/javascript/components/flagging/components/list-flags/component.jsx
+++ b/app/javascript/components/flagging/components/list-flags/component.jsx
@@ -12,7 +12,7 @@ import css from "../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ recordType, record }) => {
+function Component({ recordType, record }) {
   const i18n = useI18n();
 
   const flagsActived = useMemoizedSelector(state => getActiveFlags(state, record, recordType));
@@ -54,7 +54,7 @@ const Component = ({ recordType, record }) => {
       )}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/flagging/components/unflag/component.jsx b/app/javascript/components/flagging/components/unflag/component.jsx
index e744df480b..c5774c39b7 100644
--- a/app/javascript/components/flagging/components/unflag/component.jsx
+++ b/app/javascript/components/flagging/components/unflag/component.jsx
@@ -17,7 +17,7 @@ const validationSchema = object().shape({
   unflag_message: string().required()
 });
 
-const Component = ({ flag }) => {
+function Component({ flag }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { dialogOpen, setDialog, setDialogPending, dialogPending } = useDialog(UNFLAG_DIALOG);
@@ -76,7 +76,7 @@ const Component = ({ flag }) => {
       />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/form-filters/component.jsx b/app/javascript/components/form-filters/component.jsx
index fab8ca2e0d..2a15f5cdcd 100644
--- a/app/javascript/components/form-filters/component.jsx
+++ b/app/javascript/components/form-filters/component.jsx
@@ -8,7 +8,7 @@ import useFormFilters from "./use-form-filters";
 import { getFilters } from "./utils";
 import { NAME } from "./constants";
 
-const Component = ({ formMode, primeroModule, recordType, selectedForm, showDrawer }) => {
+function Component({ formMode, primeroModule, recordType, selectedForm, showDrawer }) {
   const Filters = getFilters(selectedForm);
 
   const { clearFilters } = useFormFilters(selectedForm);
@@ -30,7 +30,7 @@ const Component = ({ formMode, primeroModule, recordType, selectedForm, showDraw
       selectedForm={selectedForm}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/form-filters/components/change-log/component.jsx b/app/javascript/components/form-filters/components/change-log/component.jsx
index d2b53a2fe4..9aabce582c 100644
--- a/app/javascript/components/form-filters/components/change-log/component.jsx
+++ b/app/javascript/components/form-filters/components/change-log/component.jsx
@@ -13,7 +13,7 @@ import useFormFilters from "../../use-form-filters";
 import { FILTER_NAMES, NAME } from "./constants";
 import { getFilters } from "./utils";
 
-const Component = ({ selectedForm, formMode, primeroModule, recordType, showDrawer }) => {
+function Component({ selectedForm, formMode, primeroModule, recordType, showDrawer }) {
   const i18n = useI18n();
   const { setFormFilters, selectedFilters } = useFormFilters(selectedForm);
 
@@ -46,7 +46,7 @@ const Component = ({ selectedForm, formMode, primeroModule, recordType, showDraw
       />
     )
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/form-filters/components/filters-form/component.jsx b/app/javascript/components/form-filters/components/filters-form/component.jsx
index 8a351d1592..8b55882163 100644
--- a/app/javascript/components/form-filters/components/filters-form/component.jsx
+++ b/app/javascript/components/form-filters/components/filters-form/component.jsx
@@ -16,7 +16,7 @@ import { useMemoizedSelector, useThemeHelper } from "../../../../libs";
 import { FILTERS_DRAWER, NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   closeDrawerOnSubmit = false,
   filters,
   onSubmit,
@@ -24,7 +24,7 @@ const Component = ({
   defaultFilters = {},
   initialFilters = {},
   showDrawer = false
-}) => {
+}) {
   const methods = useForm();
 
   const { mobileDisplay } = useThemeHelper();
@@ -96,7 +96,7 @@ const Component = ({
       </FilterContainer>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/form/component.jsx b/app/javascript/components/form/component.jsx
index 34fab0060f..ba7caac1b5 100644
--- a/app/javascript/components/form/component.jsx
+++ b/app/javascript/components/form/component.jsx
@@ -16,7 +16,7 @@ import { whichFormMode } from "./utils/which-mode";
 import { submitHandler } from "./utils/form-submission";
 import notPropagatedOnSubmit from "./utils/not-propagated-on-submit";
 
-const Component = ({
+function Component({
   formID,
   formSections,
   formOptions = {},
@@ -36,7 +36,7 @@ const Component = ({
   registerFields = [],
   resetAfterSubmit = false,
   errorMessage = null
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -126,7 +126,7 @@ const Component = ({
       {renderBottom && renderBottom(formMethods)}
     </>
   );
-};
+}
 
 Component.displayName = "Form";
 
diff --git a/app/javascript/components/form/components/actions-menu/container.jsx b/app/javascript/components/form/components/actions-menu/container.jsx
index 744655131e..0789e1f3c8 100644
--- a/app/javascript/components/form/components/actions-menu/container.jsx
+++ b/app/javascript/components/form/components/actions-menu/container.jsx
@@ -10,7 +10,7 @@ import { ACTION_BUTTON_TYPES } from "../../../action-button/constants";
 
 import { NAME } from "./constants";
 
-const Container = ({ actionItems = [] }) => {
+function Container({ actionItems = [] }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = event => {
@@ -59,7 +59,7 @@ const Container = ({ actionItems = [] }) => {
       </Menu>
     </>
   );
-};
+}
 
 Container.propTypes = {
   actionItems: PropTypes.array
diff --git a/app/javascript/components/form/components/cancel-prompt.jsx b/app/javascript/components/form/components/cancel-prompt.jsx
index 5c900bcf10..cb624cf829 100644
--- a/app/javascript/components/form/components/cancel-prompt.jsx
+++ b/app/javascript/components/form/components/cancel-prompt.jsx
@@ -6,7 +6,7 @@ import NavigationPrompt from "react-router-navigation-prompt";
 import ActionDialog from "../../action-dialog";
 import { useI18n } from "../../i18n";
 
-const CancelPrompt = ({ useCancelPrompt = false, dirty = false, isSubmitted = false, isShow = false }) => {
+function CancelPrompt({ useCancelPrompt = false, dirty = false, isSubmitted = false, isShow = false }) {
   const i18n = useI18n();
 
   const promptCancelWhen = dirty && !isSubmitted && !isShow;
@@ -29,7 +29,7 @@ const CancelPrompt = ({ useCancelPrompt = false, dirty = false, isSubmitted = fa
   }
 
   return null;
-};
+}
 
 CancelPrompt.displayName = "CancelPrompt";
 
diff --git a/app/javascript/components/form/components/draggable-option/component.jsx b/app/javascript/components/form/components/draggable-option/component.jsx
index ee1621f2a8..e1f3ea082e 100644
--- a/app/javascript/components/form/components/draggable-option/component.jsx
+++ b/app/javascript/components/form/components/draggable-option/component.jsx
@@ -18,7 +18,7 @@ import { generateIdFromDisplayText } from "../../utils/handle-options";
 import textInputCss from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   defaultOptionId,
   index,
   name,
@@ -30,7 +30,7 @@ const Component = ({
   showDeleteAction = true,
   showDisableOption = true,
   optionFieldName = "option_strings_text"
-}) => {
+}) {
   const {
     errors,
     setValue,
@@ -140,7 +140,7 @@ const Component = ({
       )}
     </Draggable>
   );
-};
+}
 
 Component.propTypes = {
   defaultOptionId: PropTypes.string,
diff --git a/app/javascript/components/form/components/draggable-option/component.spec.js b/app/javascript/components/form/components/draggable-option/component.spec.js
index ae89d2c226..ca44e3b546 100644
--- a/app/javascript/components/form/components/draggable-option/component.spec.js
+++ b/app/javascript/components/form/components/draggable-option/component.spec.js
@@ -7,21 +7,23 @@ import DraggableOption from "./component";
 describe("<Form /> - components/<DraggableOption />", () => {
   beforeEach(() => {
     // eslint-disable-next-line react/display-name
-    const Component = props => (
-      <DragDropContext>
-        <Droppable droppableId="droppable" type="field">
-          {() => (
-            <DraggableOption
-              name="field_1"
-              index={0}
-              option={{ id: "option_1", display_text: "Display text 1", disabled: false }}
-              defaultOptionId="option_1"
-              {...props}
-            />
-          )}
-        </Droppable>
-      </DragDropContext>
-    );
+    function Component(props) {
+      return (
+        <DragDropContext>
+          <Droppable droppableId="droppable" type="field">
+            {() => (
+              <DraggableOption
+                name="field_1"
+                index={0}
+                option={{ id: "option_1", display_text: "Display text 1", disabled: false }}
+                defaultOptionId="option_1"
+                {...props}
+              />
+            )}
+          </Droppable>
+        </DragDropContext>
+      );
+    }
 
     mountedFormComponent(<Component mode="edit" />);
   });
diff --git a/app/javascript/components/form/components/form-action.jsx b/app/javascript/components/form/components/form-action.jsx
index ad18166b28..50aee70f37 100644
--- a/app/javascript/components/form/components/form-action.jsx
+++ b/app/javascript/components/form/components/form-action.jsx
@@ -5,16 +5,7 @@ import PropTypes from "prop-types";
 import ActionButton from "../../action-button";
 import { ACTION_BUTTON_TYPES } from "../../action-button/constants";
 
-const FormAction = ({
-  actionHandler,
-  cancel,
-  savingRecord = false,
-  startIcon,
-  text,
-  disabled,
-  options = {},
-  tooltip
-}) => {
+function FormAction({ actionHandler, cancel, savingRecord = false, startIcon, text, disabled, options = {}, tooltip }) {
   return (
     <ActionButton
       id="submit-form"
@@ -32,7 +23,7 @@ const FormAction = ({
       }}
     />
   );
-};
+}
 
 FormAction.displayName = "FormAction";
 
diff --git a/app/javascript/components/form/components/form-section-actions.js b/app/javascript/components/form/components/form-section-actions.js
index 8ecdcb5de8..967482c95b 100644
--- a/app/javascript/components/form/components/form-section-actions.js
+++ b/app/javascript/components/form/components/form-section-actions.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import ActionButton from "../../action-button";
 
-const FormSectionActions = ({ actions, css }) => {
+function FormSectionActions({ actions, css }) {
   if (!actions?.length) return null;
 
   return (
@@ -14,7 +14,7 @@ const FormSectionActions = ({ actions, css }) => {
       ))}
     </div>
   );
-};
+}
 
 FormSectionActions.propTypes = {
   actions: PropTypes.array,
diff --git a/app/javascript/components/form/components/form-section-field.jsx b/app/javascript/components/form/components/form-section-field.jsx
index 6449304f5f..3573220ab9 100644
--- a/app/javascript/components/form/components/form-section-field.jsx
+++ b/app/javascript/components/form/components/form-section-field.jsx
@@ -10,7 +10,7 @@ import formComponent from "../utils/form-component";
 
 import css from "./styles.css";
 
-const FormSectionField = ({ checkErrors, field, formMethods, formMode, disableUnderline = false }) => {
+function FormSectionField({ checkErrors, field, formMethods, formMode, disableUnderline = false }) {
   const { errors } = formMethods;
   const {
     Field,
@@ -55,7 +55,7 @@ const FormSectionField = ({ checkErrors, field, formMethods, formMode, disableUn
       </ConditionalWrapper>
     )
   );
-};
+}
 
 FormSectionField.displayName = "FormSectionField";
 
diff --git a/app/javascript/components/form/components/form-section-field.spec.js b/app/javascript/components/form/components/form-section-field.spec.js
index aaa2622893..6e189dd095 100644
--- a/app/javascript/components/form/components/form-section-field.spec.js
+++ b/app/javascript/components/form/components/form-section-field.spec.js
@@ -18,9 +18,9 @@ describe("<Form /> - components/<FormSectionField />", () => {
     const field = FieldRecord({ name: "test_field", type: "error_field" });
 
     // eslint-disable-next-line react/display-name
-    const Component = props => {
+    function Component(props) {
       return <FormSectionField {...props} field={field} checkErrors={fromJS(["name"])} formMode={fromJS({})} />;
-    };
+    }
 
     mountedFormComponent(<Component />, {
       errors: [
diff --git a/app/javascript/components/form/components/form-section-tabs/component.jsx b/app/javascript/components/form/components/form-section-tabs/component.jsx
index eb6bf09a1d..e427c9545a 100644
--- a/app/javascript/components/form/components/form-section-tabs/component.jsx
+++ b/app/javascript/components/form/components/form-section-tabs/component.jsx
@@ -11,7 +11,7 @@ import watchedFormSectionField from "../watched-form-section-field";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ tabs, formMethods, formMode, handleTabChange }) => {
+function Component({ tabs, formMethods, formMode, handleTabChange }) {
   const firstEnabled = tabs.findIndex(el => el.disabled === false);
   const [tab, setTab] = useState(firstEnabled);
 
@@ -48,7 +48,7 @@ const Component = ({ tabs, formMethods, formMode, handleTabChange }) => {
       {renderTabPanel()}
     </>
   );
-};
+}
 
 Component.propTypes = {
   formMethods: PropTypes.object.isRequired,
diff --git a/app/javascript/components/form/components/form-section-title.jsx b/app/javascript/components/form/components/form-section-title.jsx
index 0d0a66bba8..edecd06657 100644
--- a/app/javascript/components/form/components/form-section-title.jsx
+++ b/app/javascript/components/form/components/form-section-title.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import { useI18n } from "../../i18n";
 
-const FormSectionTitle = ({ formSection }) => {
+function FormSectionTitle({ formSection }) {
   const i18n = useI18n();
   const { name, expandable } = formSection;
   const title = i18n.getI18nStringFromObject(name);
@@ -14,7 +14,7 @@ const FormSectionTitle = ({ formSection }) => {
   }
 
   return expandable ? title : <h1>{title}</h1>;
-};
+}
 
 FormSectionTitle.displayName = "FormSectionTitle";
 
diff --git a/app/javascript/components/form/components/form-section.jsx b/app/javascript/components/form/components/form-section.jsx
index a3193c4020..e8132cba3a 100644
--- a/app/javascript/components/form/components/form-section.jsx
+++ b/app/javascript/components/form/components/form-section.jsx
@@ -17,7 +17,7 @@ import css from "./styles.css";
 import Fields from "./fields";
 import FormSectionActions from "./form-section-actions";
 
-const FormSection = ({ formSection, showTitle = true, disableUnderline = false, formMethods, formMode }) => {
+function FormSection({ formSection, showTitle = true, disableUnderline = false, formMethods, formMode }) {
   const { fields, check_errors: checkErrors, expandable, tooltip } = formSection;
   const { errors } = formMethods;
   const [expanded, setExpanded] = useState(formSection.expanded);
@@ -73,7 +73,7 @@ const FormSection = ({ formSection, showTitle = true, disableUnderline = false,
       <FormSectionActions actions={formSection.actions} css={css} />
     </>
   );
-};
+}
 
 FormSection.displayName = FORM_SECTION_NAME;
 
diff --git a/app/javascript/components/form/components/input-label.jsx b/app/javascript/components/form/components/input-label.jsx
index 866185a316..1a668de074 100644
--- a/app/javascript/components/form/components/input-label.jsx
+++ b/app/javascript/components/form/components/input-label.jsx
@@ -5,7 +5,7 @@ import isFunction from "lodash/isFunction";
 
 import Tooltip from "../../tooltip";
 
-const InputLabel = ({ tooltip = "", i18nTitle = false, text = "" }) => {
+function InputLabel({ tooltip = "", i18nTitle = false, text = "" }) {
   const renderText = isFunction(text) ? text() : text;
 
   return (
@@ -13,7 +13,7 @@ const InputLabel = ({ tooltip = "", i18nTitle = false, text = "" }) => {
       <span>{renderText}</span>
     </Tooltip>
   );
-};
+}
 
 InputLabel.displayName = "InputLabel";
 
diff --git a/app/javascript/components/form/components/watched-form-section-field.jsx b/app/javascript/components/form/components/watched-form-section-field.jsx
index aefd2e4158..642bbe130d 100644
--- a/app/javascript/components/form/components/watched-form-section-field.jsx
+++ b/app/javascript/components/form/components/watched-form-section-field.jsx
@@ -11,7 +11,7 @@ import formComponent from "../utils/form-component";
 
 import css from "./styles.css";
 
-const WatchedFormSectionField = ({ checkErrors, field, formMethods, formMode, disableUnderline = false }) => {
+function WatchedFormSectionField({ checkErrors, field, formMethods, formMode, disableUnderline = false }) {
   const { control, errors, getValues } = formMethods;
 
   const {
@@ -77,7 +77,7 @@ const WatchedFormSectionField = ({ checkErrors, field, formMethods, formMode, di
       </ConditionalWrapper>
     )
   );
-};
+}
 
 WatchedFormSectionField.displayName = "WatchedFormSectionField";
 
diff --git a/app/javascript/components/form/fields/attachment-input.jsx b/app/javascript/components/form/fields/attachment-input.jsx
index 0f9d7f60b4..d1c8ac7755 100644
--- a/app/javascript/components/form/fields/attachment-input.jsx
+++ b/app/javascript/components/form/fields/attachment-input.jsx
@@ -14,7 +14,7 @@ import { ATTACHMENT_TYPES } from "../../record-form/form/field-types/attachments
 
 import css from "./styles.css";
 
-const AttachmentInput = ({ commonInputProps, metaInputProps, formMode, formMethods }) => {
+function AttachmentInput({ commonInputProps, metaInputProps, formMode, formMethods }) {
   const { setValue, watch, register } = formMethods;
 
   const [file, setFile] = useState({
@@ -137,7 +137,7 @@ const AttachmentInput = ({ commonInputProps, metaInputProps, formMode, formMetho
       <div className={css.downloadButton}>{downloadButton}</div>
     </div>
   );
-};
+}
 
 AttachmentInput.displayName = "AttachmentInput";
 
diff --git a/app/javascript/components/form/fields/checkbox-group.jsx b/app/javascript/components/form/fields/checkbox-group.jsx
index aa318882ee..41338930c4 100644
--- a/app/javascript/components/form/fields/checkbox-group.jsx
+++ b/app/javascript/components/form/fields/checkbox-group.jsx
@@ -13,7 +13,7 @@ import InputLabel from "../components/input-label";
 
 import Separator from "./seperator";
 
-const CheckboxGroup = ({ onChange, value, options, commonInputProps }) => {
+function CheckboxGroup({ onChange, value, options, commonInputProps }) {
   const i18n = useI18n();
   const [checked, setChecked] = useState([]);
   const { name, disabled } = commonInputProps;
@@ -62,7 +62,7 @@ const CheckboxGroup = ({ onChange, value, options, commonInputProps }) => {
     });
 
   return <>{renderCheckboxes()}</>;
-};
+}
 
 CheckboxGroup.displayName = "CheckboxGroup";
 
diff --git a/app/javascript/components/form/fields/checkbox-input.jsx b/app/javascript/components/form/fields/checkbox-input.jsx
index f3420008e6..a913a40aef 100644
--- a/app/javascript/components/form/fields/checkbox-input.jsx
+++ b/app/javascript/components/form/fields/checkbox-input.jsx
@@ -7,7 +7,7 @@ import { Controller } from "react-hook-form";
 import CheckboxGroup from "./checkbox-group";
 import css from "./styles.css";
 
-const CheckboxInput = ({ commonInputProps, options, metaInputProps, formMethods }) => {
+function CheckboxInput({ commonInputProps, options, metaInputProps, formMethods }) {
   const { control } = formMethods;
   const { name, error, required, label, helperText, disabled } = commonInputProps;
   const { inlineCheckboxes } = metaInputProps;
@@ -31,7 +31,7 @@ const CheckboxInput = ({ commonInputProps, options, metaInputProps, formMethods
       <FormHelperText>{helperText}</FormHelperText>
     </FormControl>
   );
-};
+}
 
 CheckboxInput.displayName = "CheckboxInput";
 
diff --git a/app/javascript/components/form/fields/date-input.jsx b/app/javascript/components/form/fields/date-input.jsx
index ae418f2d4e..d8d181b010 100644
--- a/app/javascript/components/form/fields/date-input.jsx
+++ b/app/javascript/components/form/fields/date-input.jsx
@@ -14,7 +14,7 @@ import localize from "../../../libs/date-picker-localization";
 import { LOCALE_KEYS } from "../../../config";
 import NepaliCalendar from "../../nepali-calendar-input";
 
-const DateInput = ({ commonInputProps, metaInputProps = {}, formMethods }) => {
+function DateInput({ commonInputProps, metaInputProps = {}, formMethods }) {
   const i18n = useI18n();
   const { setValue, control } = formMethods;
   const { name, label, helperText, error, disabled, placeholder, fullWidth, required } = commonInputProps;
@@ -84,7 +84,7 @@ const DateInput = ({ commonInputProps, metaInputProps = {}, formMethods }) => {
       />
     </LocalizationProvider>
   );
-};
+}
 
 DateInput.displayName = "DateInput";
 
diff --git a/app/javascript/components/form/fields/dialog-trigger.jsx b/app/javascript/components/form/fields/dialog-trigger.jsx
index 568625fe35..766c4a166f 100644
--- a/app/javascript/components/form/fields/dialog-trigger.jsx
+++ b/app/javascript/components/form/fields/dialog-trigger.jsx
@@ -5,7 +5,7 @@ import { Button, Link } from "@mui/material";
 
 import css from "./styles.css";
 
-const DialogTrigger = ({ commonInputProps, metaInputProps }) => {
+function DialogTrigger({ commonInputProps, metaInputProps }) {
   const { label, id } = commonInputProps;
   const { onClick } = metaInputProps;
 
@@ -14,7 +14,7 @@ const DialogTrigger = ({ commonInputProps, metaInputProps }) => {
       {label}
     </Button>
   );
-};
+}
 
 DialogTrigger.displayName = "DialogTrigger";
 
diff --git a/app/javascript/components/form/fields/error-field.jsx b/app/javascript/components/form/fields/error-field.jsx
index 517a6f56e9..a224fdc85a 100644
--- a/app/javascript/components/form/fields/error-field.jsx
+++ b/app/javascript/components/form/fields/error-field.jsx
@@ -6,7 +6,7 @@ import Alert from "@mui/material/Alert";
 
 import { ERROR_FIELD_NAME } from "./constants";
 
-const ErrorField = ({ errorsToCheck = fromJS([]), formMethods }) => {
+function ErrorField({ errorsToCheck = fromJS([]), formMethods }) {
   const { errors } = formMethods;
 
   if (!errorsToCheck?.size) {
@@ -21,7 +21,7 @@ const ErrorField = ({ errorsToCheck = fromJS([]), formMethods }) => {
       {errors[error].message}
     </Alert>
   ));
-};
+}
 
 ErrorField.displayName = ERROR_FIELD_NAME;
 
diff --git a/app/javascript/components/form/fields/error-field.spec.js b/app/javascript/components/form/fields/error-field.spec.js
index fee9127e5e..4cf0cd3f2a 100644
--- a/app/javascript/components/form/fields/error-field.spec.js
+++ b/app/javascript/components/form/fields/error-field.spec.js
@@ -7,7 +7,9 @@ import ErrorField from "./error-field";
 describe("<Form /> - fields/<ErrorField />", () => {
   it("renders a error field if there are errors in the forms", () => {
     // eslint-disable-next-line react/display-name, react/no-multi-comp, react/prop-types
-    const Component = ({ formMethods }) => <ErrorField errorsToCheck={fromJS(["name"])} formMethods={formMethods} />;
+    function Component({ formMethods }) {
+      return <ErrorField errorsToCheck={fromJS(["name"])} formMethods={formMethods} />;
+    }
 
     mountedFieldComponent(<Component />, {
       errors: [
@@ -22,7 +24,9 @@ describe("<Form /> - fields/<ErrorField />", () => {
 
   it("does not render the error field if the form doesn't have errors", () => {
     // eslint-disable-next-line react/display-name, react/no-multi-comp, react/prop-types
-    const Component = ({ formMethods }) => <ErrorField formMethods={formMethods} errorsToCheck={fromJS(["name"])} />;
+    function Component({ formMethods }) {
+      return <ErrorField formMethods={formMethods} errorsToCheck={fromJS(["name"])} />;
+    }
 
     mountedFieldComponent(<Component />);
     expect(document.querySelector(".MuiAlert-message")).toBeNull();
diff --git a/app/javascript/components/form/fields/hidden-input.jsx b/app/javascript/components/form/fields/hidden-input.jsx
index 7cf4c67d01..9f3aad9446 100644
--- a/app/javascript/components/form/fields/hidden-input.jsx
+++ b/app/javascript/components/form/fields/hidden-input.jsx
@@ -2,12 +2,12 @@
 
 import PropTypes from "prop-types";
 
-const HiddenInput = ({ commonInputProps, formMethods }) => {
+function HiddenInput({ commonInputProps, formMethods }) {
   const { name } = commonInputProps;
   const { register } = formMethods;
 
   return <input id={name} type="hidden" ref={register} name={name} />;
-};
+}
 
 HiddenInput.displayName = "HiddenInput";
 
diff --git a/app/javascript/components/form/fields/label.jsx b/app/javascript/components/form/fields/label.jsx
index d927828429..acaf981d48 100644
--- a/app/javascript/components/form/fields/label.jsx
+++ b/app/javascript/components/form/fields/label.jsx
@@ -2,12 +2,12 @@
 
 import PropTypes from "prop-types";
 
-const Label = ({ commonInputProps }) => {
+function Label({ commonInputProps }) {
   const { label, className } = commonInputProps;
   const classToApply = className || "";
 
   return <div className={classToApply}>{label}</div>;
-};
+}
 
 Label.displayName = "Label";
 
diff --git a/app/javascript/components/form/fields/link-field.jsx b/app/javascript/components/form/fields/link-field.jsx
index 61f82ba56b..897a92a797 100644
--- a/app/javascript/components/form/fields/link-field.jsx
+++ b/app/javascript/components/form/fields/link-field.jsx
@@ -9,7 +9,7 @@ import InputLabel from "../components/input-label";
 
 import css from "./styles.css";
 
-const LinkField = ({ commonInputProps, metaInputProps, formMethods }) => {
+function LinkField({ commonInputProps, metaInputProps, formMethods }) {
   const { tooltip, href } = metaInputProps;
   const { name, label } = commonInputProps;
   const { control } = formMethods;
@@ -26,7 +26,7 @@ const LinkField = ({ commonInputProps, metaInputProps, formMethods }) => {
       </NavLink>
     </FormControl>
   );
-};
+}
 
 LinkField.displayName = "LinkField";
 
diff --git a/app/javascript/components/form/fields/orderable-options-field.jsx b/app/javascript/components/form/fields/orderable-options-field.jsx
index 6d6d439aa5..da25213e58 100644
--- a/app/javascript/components/form/fields/orderable-options-field.jsx
+++ b/app/javascript/components/form/fields/orderable-options-field.jsx
@@ -17,13 +17,7 @@ import { generateIdForNewOption } from "../utils/handle-options";
 import { ORDERABLE_OPTIONS_FIELD_NAME } from "./constants";
 import css from "./styles.css";
 
-const OrderableOptionsField = ({
-  commonInputProps,
-  metaInputProps,
-  showActionButtons = false,
-  formMethods,
-  formMode
-}) => {
+function OrderableOptionsField({ commonInputProps, metaInputProps, showActionButtons = false, formMethods, formMode }) {
   const i18n = useI18n();
   const [disabledAddAction, setDisabledAddAction] = useState(false);
 
@@ -112,7 +106,7 @@ const OrderableOptionsField = ({
       )}
     </div>
   );
-};
+}
 
 OrderableOptionsField.displayName = ORDERABLE_OPTIONS_FIELD_NAME;
 
diff --git a/app/javascript/components/form/fields/radio-input.jsx b/app/javascript/components/form/fields/radio-input.jsx
index 3eb5dff483..5971364eb2 100644
--- a/app/javascript/components/form/fields/radio-input.jsx
+++ b/app/javascript/components/form/fields/radio-input.jsx
@@ -6,7 +6,7 @@ import { Controller } from "react-hook-form";
 
 import css from "./styles.css";
 
-const RadioInput = ({ commonInputProps, options, formMethods }) => {
+function RadioInput({ commonInputProps, options, formMethods }) {
   const { helperText, error, name, label: radioGroupLabel, className, disabled } = commonInputProps;
   const { control } = formMethods;
 
@@ -36,7 +36,7 @@ const RadioInput = ({ commonInputProps, options, formMethods }) => {
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
-};
+}
 
 RadioInput.displayName = "RadioInput";
 
diff --git a/app/javascript/components/form/fields/record-attachment-input.jsx b/app/javascript/components/form/fields/record-attachment-input.jsx
index a61c907701..cf8d3e4e55 100644
--- a/app/javascript/components/form/fields/record-attachment-input.jsx
+++ b/app/javascript/components/form/fields/record-attachment-input.jsx
@@ -10,7 +10,7 @@ import { PHOTO_RECORD_FIELD } from "../constants";
 
 import AudioArray from "./audio-array";
 
-const AttachmentInputArray = ({ commonInputProps, metaInputProps, formMode, formMethods }) => {
+function AttachmentInputArray({ commonInputProps, metaInputProps, formMode, formMethods }) {
   const arrayMethods = useFieldArray({
     control: formMethods.control,
     name: commonInputProps.name
@@ -38,7 +38,7 @@ const AttachmentInputArray = ({ commonInputProps, metaInputProps, formMode, form
       <AttachmentArray images={urls} attachments={arrayMethods.fields} />
     </div>
   );
-};
+}
 
 AttachmentInputArray.displayName = "AttachmentInputArray";
 
diff --git a/app/javascript/components/form/fields/select-input.jsx b/app/javascript/components/form/fields/select-input.jsx
index d83a55a545..ed823b9e0b 100644
--- a/app/javascript/components/form/fields/select-input.jsx
+++ b/app/javascript/components/form/fields/select-input.jsx
@@ -22,7 +22,7 @@ import css from "./styles.css";
 
 const filter = createFilterOptions({ limit: 50 });
 
-const SelectInput = ({ commonInputProps, metaInputProps, options: allOptions = [], formMethods, isShow = false }) => {
+function SelectInput({ commonInputProps, metaInputProps, options: allOptions = [], formMethods, isShow = false }) {
   const { control, setValue, getValues } = formMethods;
   const {
     multiSelect,
@@ -299,7 +299,7 @@ const SelectInput = ({ commonInputProps, metaInputProps, options: allOptions = [
       )}
     />
   );
-};
+}
 
 SelectInput.displayName = "SelectInput";
 
diff --git a/app/javascript/components/form/fields/seperator.jsx b/app/javascript/components/form/fields/seperator.jsx
index 2d6d1b1b17..2c2221cdbd 100644
--- a/app/javascript/components/form/fields/seperator.jsx
+++ b/app/javascript/components/form/fields/seperator.jsx
@@ -5,7 +5,7 @@ import { Typography } from "@mui/material";
 
 import css from "./styles.css";
 
-const Seperator = ({ commonInputProps }) => {
+function Seperator({ commonInputProps }) {
   const { label, id = "" } = commonInputProps;
 
   if (!label) {
@@ -17,7 +17,7 @@ const Seperator = ({ commonInputProps }) => {
       {label}
     </Typography>
   );
-};
+}
 
 Seperator.displayName = "Seperator";
 
diff --git a/app/javascript/components/form/fields/switch-input.jsx b/app/javascript/components/form/fields/switch-input.jsx
index 2bbe1af0da..11139957ff 100644
--- a/app/javascript/components/form/fields/switch-input.jsx
+++ b/app/javascript/components/form/fields/switch-input.jsx
@@ -6,7 +6,7 @@ import { Controller } from "react-hook-form";
 
 import InputLabel from "../components/input-label";
 
-const SwitchInput = ({ commonInputProps, metaInputProps, formMethods }) => {
+function SwitchInput({ commonInputProps, metaInputProps, formMethods }) {
   const { helperText, error, disabled, name, label, className, id } = commonInputProps;
   const { control } = formMethods;
   const { tooltip, selectedValue } = metaInputProps || {};
@@ -46,7 +46,7 @@ const SwitchInput = ({ commonInputProps, metaInputProps, formMethods }) => {
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
-};
+}
 
 SwitchInput.displayName = "SwitchInput";
 
diff --git a/app/javascript/components/form/fields/text-input.jsx b/app/javascript/components/form/fields/text-input.jsx
index d4bceb557e..1c0aa76b2a 100644
--- a/app/javascript/components/form/fields/text-input.jsx
+++ b/app/javascript/components/form/fields/text-input.jsx
@@ -10,7 +10,7 @@ import InputLabel from "../components/input-label";
 
 import css from "./styles.css";
 
-const TextInput = ({ commonInputProps, metaInputProps = {}, formMethods }) => {
+function TextInput({ commonInputProps, metaInputProps = {}, formMethods }) {
   const { control } = formMethods;
   const { type, password, hint, tooltip, numeric, onBlur, onKeyPress, maxlength } = metaInputProps;
   let inputType = "text";
@@ -57,7 +57,7 @@ const TextInput = ({ commonInputProps, metaInputProps = {}, formMethods }) => {
       defaultValue={defaultValue || ""}
     />
   );
-};
+}
 
 TextInput.displayName = "TextInput";
 
diff --git a/app/javascript/components/form/fields/toggle-input.jsx b/app/javascript/components/form/fields/toggle-input.jsx
index 5ab35af160..4295becea1 100644
--- a/app/javascript/components/form/fields/toggle-input.jsx
+++ b/app/javascript/components/form/fields/toggle-input.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { Checkbox, FormControl, FormGroup, FormControlLabel, FormHelperText } from "@mui/material";
 import { Controller } from "react-hook-form";
 
-const ToggleInput = ({ commonInputProps, formMethods }) => {
+function ToggleInput({ commonInputProps, formMethods }) {
   const { control } = formMethods;
   const { helperText, error, disabled, name, label, className, id } = commonInputProps;
 
@@ -34,7 +34,7 @@ const ToggleInput = ({ commonInputProps, formMethods }) => {
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
-};
+}
 
 ToggleInput.displayName = "ToggleInput";
 
diff --git a/app/javascript/components/i18n/provider.js b/app/javascript/components/i18n/provider.js
index 8c622fa239..a47d73fe2f 100644
--- a/app/javascript/components/i18n/provider.js
+++ b/app/javascript/components/i18n/provider.js
@@ -18,7 +18,7 @@ import { getLocales, getLocale, getAppDirection } from "./selectors";
 import useI18n from "./use-i18n";
 import { getLocaleDir } from "./utils";
 
-const I18nProvider = ({ children }) => {
+function I18nProvider({ children }) {
   const locale = useMemoizedSelector(state => getLocale(state));
   const dir = useMemoizedSelector(state => getAppDirection(state));
   const locales = useMemoizedSelector(state => getLocales(state));
@@ -77,7 +77,7 @@ const I18nProvider = ({ children }) => {
       {children}
     </Context.Provider>
   );
-};
+}
 
 I18nProvider.displayName = "I18nProvider";
 
diff --git a/app/javascript/components/i18n/provider.spec.js b/app/javascript/components/i18n/provider.spec.js
index 9f7aaae192..834603a1c8 100644
--- a/app/javascript/components/i18n/provider.spec.js
+++ b/app/javascript/components/i18n/provider.spec.js
@@ -25,7 +25,7 @@ describe("I18nProvider - changeLocale", () => {
   it("should handle changeLocale method", () => {
     const newLocale = "fr";
 
-    const TestComponent = () => {
+    function TestComponent() {
       const { changeLocale } = useI18n();
 
       return (
@@ -39,7 +39,7 @@ describe("I18nProvider - changeLocale", () => {
           I18n Test Component
         </button>
       );
-    };
+    }
 
     mountedComponent(<TestComponent />);
 
@@ -69,11 +69,11 @@ describe("localizeDate", () => {
 });
 
 describe("I18nProvider - t", () => {
-  const TestComponent = () => {
+  function TestComponent() {
     const i18n = useI18n();
 
     return <p>{i18n.t("test")}</p>;
-  };
+  }
 
   const translations = {
     en: {
diff --git a/app/javascript/components/incidents-from-case/components/detail/component.jsx b/app/javascript/components/incidents-from-case/components/detail/component.jsx
index 90311835ea..b94016f328 100644
--- a/app/javascript/components/incidents-from-case/components/detail/component.jsx
+++ b/app/javascript/components/incidents-from-case/components/detail/component.jsx
@@ -14,7 +14,7 @@ import { ACTION_BUTTON_TYPES } from "../../../action-button/constants";
 
 import { EDIT, VIEW } from "./constants";
 
-const Component = ({
+function Component({
   css,
   incidentDateInterview,
   incidentDate,
@@ -23,7 +23,7 @@ const Component = ({
   handleCreateIncident,
   incidentAvailable,
   dirty = false
-}) => {
+}) {
   const i18n = useI18n();
   const canViewIncidents = usePermissions(RESOURCES.incidents, READ_RECORDS);
   const canEditIncidents = usePermissions(RESOURCES.incidents, WRITE_RECORDS);
@@ -92,7 +92,7 @@ const Component = ({
       </Grid>
     </>
   );
-};
+}
 
 Component.displayName = NAME_DETAIL;
 
diff --git a/app/javascript/components/incidents-from-case/components/panel/component.jsx b/app/javascript/components/incidents-from-case/components/panel/component.jsx
index 560ae30778..359875947b 100644
--- a/app/javascript/components/incidents-from-case/components/panel/component.jsx
+++ b/app/javascript/components/incidents-from-case/components/panel/component.jsx
@@ -17,7 +17,7 @@ import { getFieldByName } from "../../../record-form/selectors";
 
 import { CP_VIOLENCE_TYPE, GBV_VIOLENCE_TYPE } from "./constants";
 
-const Component = ({
+function Component({
   incident,
   incidentCaseId,
   incidentCaseIdDisplay,
@@ -28,7 +28,7 @@ const Component = ({
   recordType,
   handleCreateIncident,
   dirty = false
-}) => {
+}) {
   const i18n = useI18n();
   const [expanded, setExpanded] = useState(false);
   const handleExpanded = () => {
@@ -92,7 +92,7 @@ const Component = ({
       </Accordion>
     </div>
   );
-};
+}
 
 Component.displayName = NAME_PANEL;
 
diff --git a/app/javascript/components/incidents-from-case/components/summary/component.jsx b/app/javascript/components/incidents-from-case/components/summary/component.jsx
index 7a01da56bd..ad5023f458 100644
--- a/app/javascript/components/incidents-from-case/components/summary/component.jsx
+++ b/app/javascript/components/incidents-from-case/components/summary/component.jsx
@@ -5,7 +5,7 @@ import { Grid } from "@mui/material";
 
 import { NAME_SUMMARY } from "../../constants";
 
-const Component = ({ css, incidentDate, incidentType }) => {
+function Component({ css, incidentDate, incidentType }) {
   return (
     <Grid container spacing={2} alignItems="center" data-testid="incidentsummary">
       <Grid item md={10} xs={8}>
@@ -16,7 +16,7 @@ const Component = ({ css, incidentDate, incidentType }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 Component.displayName = NAME_SUMMARY;
 
diff --git a/app/javascript/components/incidents-from-case/container.jsx b/app/javascript/components/incidents-from-case/container.jsx
index 4a1c9ee58a..2dc4268396 100644
--- a/app/javascript/components/incidents-from-case/container.jsx
+++ b/app/javascript/components/incidents-from-case/container.jsx
@@ -16,7 +16,7 @@ import css from "./styles.css";
 import { NAME } from "./constants";
 import IncidentPanel from "./components/panel";
 
-const Container = ({
+function Container({
   handleCreateIncident,
   record,
   incidents,
@@ -28,7 +28,7 @@ const Container = ({
   recordType,
   primeroModule,
   dirty = false
-}) => {
+}) {
   const i18n = useI18n();
 
   const incidentFromCaseForm = useMemoizedSelector(state =>
@@ -82,7 +82,7 @@ const Container = ({
       {renderIncidents}
     </div>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/component.jsx b/app/javascript/components/index-filters/component.jsx
index 6d755befb4..1fdba86bdc 100644
--- a/app/javascript/components/index-filters/component.jsx
+++ b/app/javascript/components/index-filters/component.jsx
@@ -28,7 +28,7 @@ import { applyFilters, setFilters } from "./action-creators";
 import css from "./components/styles.css";
 import TabFilters from "./components/tab-filters";
 
-const Component = ({ recordType, setSelectedRecords, metadata }) => {
+function Component({ recordType, setSelectedRecords, metadata }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const location = useLocation();
@@ -177,7 +177,7 @@ const Component = ({ recordType, setSelectedRecords, metadata }) => {
       <SavedSearchesForm recordType={recordType} getValues={methods.getValues} open={open} setOpen={setOpen} />
     </div>
   );
-};
+}
 
 Component.displayName = "IndexFilters";
 
diff --git a/app/javascript/components/index-filters/components/actions.jsx b/app/javascript/components/index-filters/components/actions.jsx
index e2692a9e54..7dc3cf1c2d 100644
--- a/app/javascript/components/index-filters/components/actions.jsx
+++ b/app/javascript/components/index-filters/components/actions.jsx
@@ -8,7 +8,7 @@ import { ACTION_BUTTON_TYPES } from "../../action-button/constants";
 
 import css from "./styles.css";
 
-const Actions = ({ handleSave, handleClear }) => {
+function Actions({ handleSave, handleClear }) {
   const showSave = handleSave && (
     <DisableOffline button>
       <ActionButton
@@ -47,7 +47,7 @@ const Actions = ({ handleSave, handleClear }) => {
       </DisableOffline>
     </div>
   );
-};
+}
 
 Actions.propTypes = {
   handleClear: PropTypes.func.isRequired,
diff --git a/app/javascript/components/index-filters/components/filter-category.jsx b/app/javascript/components/index-filters/components/filter-category.jsx
index 35b00a4e8b..d8bdb68724 100644
--- a/app/javascript/components/index-filters/components/filter-category.jsx
+++ b/app/javascript/components/index-filters/components/filter-category.jsx
@@ -8,7 +8,7 @@ import { FILTER_CATEGORY } from "../constants";
 
 import css from "./styles.css";
 
-const FilterCategory = ({ formMethods }) => {
+function FilterCategory({ formMethods }) {
   const i18n = useI18n();
   const options = Object.values(FILTER_CATEGORY).map(
     elem => ({
@@ -33,7 +33,7 @@ const FilterCategory = ({ formMethods }) => {
       />
     </div>
   );
-};
+}
 
 FilterCategory.displayName = "FilterCategory";
 
diff --git a/app/javascript/components/index-filters/components/filter-types/checkbox-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/checkbox-filter/component.jsx
index 80fe999b33..86a3a8d735 100644
--- a/app/javascript/components/index-filters/components/filter-types/checkbox-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/checkbox-filter/component.jsx
@@ -21,7 +21,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) => {
+function Component({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) {
   const i18n = useI18n();
   const { register, unregister, setValue, user, getValues } = useFormContext();
   const valueRef = useRef();
@@ -124,7 +124,7 @@ const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mod
       </FormControl>
     </Panel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/filter-types/chips-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/chips-filter/component.jsx
index 20b44e9764..64c8a4c8ab 100644
--- a/app/javascript/components/index-filters/components/filter-types/chips-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/chips-filter/component.jsx
@@ -22,7 +22,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) => {
+function Component({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) {
   const i18n = useI18n();
 
   const { register, unregister, setValue, getValues } = useFormContext();
@@ -125,7 +125,7 @@ const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mod
       <div className={css.chipsContainer}>{renderOptions()}</div>
     </Panel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/filter-types/date-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/date-filter/component.jsx
index 7a98abe04b..39f0f313c8 100644
--- a/app/javascript/components/index-filters/components/filter-types/date-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/date-filter/component.jsx
@@ -16,7 +16,7 @@ import DatePickers from "./date-pickers";
 import { getDatesValue } from "./utils";
 import { NAME } from "./constants";
 
-const Component = ({ filter, mode, moreSectionFilters = {}, setMoreSectionFilters, reset, setReset }) => {
+function Component({ filter, mode, moreSectionFilters = {}, setMoreSectionFilters, reset, setReset }) {
   const i18n = useI18n();
 
   const { register, setValue, getValues } = useFormContext();
@@ -118,7 +118,7 @@ const Component = ({ filter, mode, moreSectionFilters = {}, setMoreSectionFilter
       </div>
     </Panel>
   );
-};
+}
 
 Component.propTypes = {
   filter: PropTypes.object.isRequired,
diff --git a/app/javascript/components/index-filters/components/filter-types/date-filter/field-select.jsx b/app/javascript/components/index-filters/components/filter-types/date-filter/field-select.jsx
index 8a9e1318ef..d7220d6405 100644
--- a/app/javascript/components/index-filters/components/filter-types/date-filter/field-select.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/date-filter/field-select.jsx
@@ -5,7 +5,7 @@ import { Select, MenuItem } from "@mui/material";
 
 import css from "../styles.css";
 
-const Component = ({ handleSelectedField, options, selectedField }) => {
+function Component({ handleSelectedField, options, selectedField }) {
   return (
     <div className={css.dateInput}>
       <Select fullWidth value={selectedField} onChange={handleSelectedField} variant="outlined">
@@ -17,7 +17,7 @@ const Component = ({ handleSelectedField, options, selectedField }) => {
       </Select>
     </div>
   );
-};
+}
 
 Component.displayName = "FieldSelect";
 
diff --git a/app/javascript/components/index-filters/components/filter-types/search.jsx b/app/javascript/components/index-filters/components/filter-types/search.jsx
index f055290066..d523506c6d 100644
--- a/app/javascript/components/index-filters/components/filter-types/search.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/search.jsx
@@ -12,7 +12,7 @@ import css from "./styles.css";
 import { registerInput } from "./utils";
 import handleFilterChange from "./value-handlers";
 
-const Search = () => {
+function Search() {
   const i18n = useI18n();
 
   const { register, unregister, setValue } = useFormContext();
@@ -82,7 +82,7 @@ const Search = () => {
       </div>
     </div>
   );
-};
+}
 
 Search.displayName = "Search";
 
diff --git a/app/javascript/components/index-filters/components/filter-types/select-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/select-filter/component.jsx
index da309bd8ce..8bd012f52b 100644
--- a/app/javascript/components/index-filters/components/filter-types/select-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/select-filter/component.jsx
@@ -25,7 +25,7 @@ import { OPTION_TYPES } from "../../../../form/constants";
 import { NAME } from "./constants";
 import { getOptionName } from "./utils";
 
-const Component = ({
+function Component({
   filter,
   mode,
   moreSectionFilters = {},
@@ -33,7 +33,7 @@ const Component = ({
   reset,
   setMoreSectionFilters,
   setReset
-}) => {
+}) {
   const i18n = useI18n();
   const formMethods = useFormContext();
   const valueRef = useRef();
@@ -201,7 +201,7 @@ const Component = ({
       )}
     </Panel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/filter-types/switch-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/switch-filter/component.jsx
index c882201d15..993f9d51cd 100644
--- a/app/javascript/components/index-filters/components/filter-types/switch-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/switch-filter/component.jsx
@@ -12,7 +12,7 @@ import handleFilterChange from "../value-handlers";
 
 import { NAME } from "./constants";
 
-const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) => {
+function Component({ filter, moreSectionFilters = {}, setMoreSectionFilters, mode, reset, setReset }) {
   const i18n = useI18n();
   const { register, unregister, setValue, getValues } = useFormContext();
   const [inputValue, setInputValue] = useState();
@@ -82,7 +82,7 @@ const Component = ({ filter, moreSectionFilters = {}, setMoreSectionFilters, mod
       </FormControl>
     </Panel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/filter-types/toggle-filter/component.jsx b/app/javascript/components/index-filters/components/filter-types/toggle-filter/component.jsx
index a0fe5845a2..1d04fc7ab2 100644
--- a/app/javascript/components/index-filters/components/filter-types/toggle-filter/component.jsx
+++ b/app/javascript/components/index-filters/components/filter-types/toggle-filter/component.jsx
@@ -22,7 +22,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ filter, mode, moreSectionFilters = {}, reset, setMoreSectionFilters, setReset }) => {
+function Component({ filter, mode, moreSectionFilters = {}, reset, setMoreSectionFilters, setReset }) {
   const i18n = useI18n();
 
   const { register, unregister, setValue, getValues } = useFormContext();
@@ -121,7 +121,7 @@ const Component = ({ filter, mode, moreSectionFilters = {}, reset, setMoreSectio
       </ToggleButtonGroup>
     </Panel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/more-section.jsx b/app/javascript/components/index-filters/components/more-section.jsx
index c85bececcb..99892f93ca 100644
--- a/app/javascript/components/index-filters/components/more-section.jsx
+++ b/app/javascript/components/index-filters/components/more-section.jsx
@@ -11,7 +11,7 @@ import { ACTION_BUTTON_TYPES } from "../../action-button/constants";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const MoreSection = ({
+function MoreSection({
   allAvailable,
   defaultFilters,
   more,
@@ -20,7 +20,7 @@ const MoreSection = ({
   recordType,
   setMore,
   setMoreSectionFilters
-}) => {
+}) {
   const moreSectionKeys = Object.keys(moreSectionFilters);
   const mode = {
     secondary: true,
@@ -78,7 +78,7 @@ const MoreSection = ({
       />
     </>
   );
-};
+}
 
 MoreSection.displayName = NAME;
 
diff --git a/app/javascript/components/index-filters/components/panel.jsx b/app/javascript/components/index-filters/components/panel.jsx
index ddd9b28168..3cc4473ccc 100644
--- a/app/javascript/components/index-filters/components/panel.jsx
+++ b/app/javascript/components/index-filters/components/panel.jsx
@@ -14,7 +14,7 @@ import { useThemeHelper } from "../../../libs";
 
 import css from "./styles.css";
 
-const Panel = ({ filter, getValues, selectedDefaultValueField, handleReset, moreSectionFilters = {}, children }) => {
+function Panel({ filter, getValues, selectedDefaultValueField, handleReset, moreSectionFilters = {}, children }) {
   const { isRTL } = useThemeHelper();
   const { name, field_name: fieldName } = filter;
 
@@ -55,7 +55,7 @@ const Panel = ({ filter, getValues, selectedDefaultValueField, handleReset, more
       <AccordionDetails className={css.panelDetails}>{children}</AccordionDetails>
     </Accordion>
   );
-};
+}
 
 Panel.displayName = "Panel";
 
diff --git a/app/javascript/components/index-filters/components/tab-filters.jsx b/app/javascript/components/index-filters/components/tab-filters.jsx
index 8149fdc39f..2a6ce92d27 100644
--- a/app/javascript/components/index-filters/components/tab-filters.jsx
+++ b/app/javascript/components/index-filters/components/tab-filters.jsx
@@ -16,7 +16,7 @@ import RecordFilters from "./record-filters";
 import css from "./styles.css";
 import FilterCategory from "./filter-category";
 
-const TabFilters = ({
+function TabFilters({
   formMethods,
   handleClear,
   handleSave,
@@ -28,7 +28,7 @@ const TabFilters = ({
   setMore,
   setMoreSectionFilters,
   setReset
-}) => {
+}) {
   const filterCategory = useWatch({ control: formMethods.control, name: "filter_category" });
   const filters = useMemoizedSelector(state => getFiltersByRecordType(state, recordType, filterCategory));
   const hasPrimeroModuleMRM = useMemoizedSelector(state => hasPrimeroModule(state, MODULES.MRM));
@@ -71,7 +71,7 @@ const TabFilters = ({
       />
     </div>
   );
-};
+}
 
 TabFilters.displayName = "TabFilters";
 
diff --git a/app/javascript/components/index-table/cell-renderers/DateCell.jsx b/app/javascript/components/index-table/cell-renderers/DateCell.jsx
index a72c350bd1..b64f402333 100644
--- a/app/javascript/components/index-table/cell-renderers/DateCell.jsx
+++ b/app/javascript/components/index-table/cell-renderers/DateCell.jsx
@@ -8,7 +8,7 @@ import NepaliCalendar from "../../nepali-calendar-input";
 
 import css from "./styles.css";
 
-const DateCell = ({ value, withTime }) => {
+function DateCell({ value, withTime }) {
   const i18n = useI18n();
 
   if (i18n.locale === LOCALE_KEYS.ne) {
@@ -26,7 +26,7 @@ const DateCell = ({ value, withTime }) => {
   }
 
   return <>{i18n.l(`date.formats.${withTime ? "with_time" : "default"}`, value)}</>;
-};
+}
 
 DateCell.displayName = "DateCell";
 
diff --git a/app/javascript/components/index-table/cell-renderers/ToggleIconCell.jsx b/app/javascript/components/index-table/cell-renderers/ToggleIconCell.jsx
index 52d3f1daf9..4b585ccff7 100644
--- a/app/javascript/components/index-table/cell-renderers/ToggleIconCell.jsx
+++ b/app/javascript/components/index-table/cell-renderers/ToggleIconCell.jsx
@@ -12,7 +12,7 @@ import { FlagIcon } from "../../../images/primero-icons";
 
 import css from "./styles.css";
 
-const ToggleIconCell = ({ value, icon }) => {
+function ToggleIconCell({ value, icon }) {
   if (!value) {
     return null;
   }
@@ -42,7 +42,7 @@ const ToggleIconCell = ({ value, icon }) => {
       </Icon>
     </ConditionalWrapper>
   );
-};
+}
 
 ToggleIconCell.displayName = "ToggleIconCell";
 ToggleIconCell.propTypes = {
diff --git a/app/javascript/components/index-table/component.jsx b/app/javascript/components/index-table/component.jsx
index f1ec36da52..d1063d1ecd 100644
--- a/app/javascript/components/index-table/component.jsx
+++ b/app/javascript/components/index-table/component.jsx
@@ -9,9 +9,9 @@ import { NAME } from "./config";
 import { getRecords, getLoading, getErrors } from "./selectors";
 import Datatable from "./components/data-table";
 
-const Component = (
+function Component(
   props = { bypassInitialFetch: false, canSelectAll: true, showCustomToolbar: false, useReportingLocations: true }
-) => {
+) {
   const { recordType, targetRecordType, checkComplete } = props;
   const data = useMemoizedSelector(
     state => getRecords(state, recordType, checkComplete),
@@ -35,7 +35,7 @@ const Component = (
       loadingIndicatorType={loadingIndicatorType}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/index-table/components/data-table.jsx b/app/javascript/components/index-table/components/data-table.jsx
index f4c64a52b0..8af0807cd3 100644
--- a/app/javascript/components/index-table/components/data-table.jsx
+++ b/app/javascript/components/index-table/components/data-table.jsx
@@ -23,7 +23,7 @@ import { useApp } from "../../application";
 
 import TableLoadingIndicator from "./table-loading-indicator";
 
-const Datatable = ({
+function Datatable({
   arrayColumnsToString,
   bypassInitialFetch,
   canSelectAll,
@@ -47,7 +47,7 @@ const Datatable = ({
   title,
   customToolbarSelect = null,
   useReportingLocations
-}) => {
+}) {
   const dispatch = useDispatch();
   const i18n = useI18n();
   const { online } = useApp();
@@ -263,7 +263,7 @@ const Datatable = ({
       />
     </ConditionalWrapper>
   );
-};
+}
 
 Datatable.displayName = NAME;
 
diff --git a/app/javascript/components/index-table/custom-toolbar-select/component.jsx b/app/javascript/components/index-table/custom-toolbar-select/component.jsx
index 148b5a3755..64aa1e82da 100644
--- a/app/javascript/components/index-table/custom-toolbar-select/component.jsx
+++ b/app/javascript/components/index-table/custom-toolbar-select/component.jsx
@@ -13,7 +13,7 @@ import css from "./styles.css";
 import { NAME } from "./constants";
 import { selectAllRecords } from "./utils";
 
-const Component = ({
+function Component({
   canSelectAll = false,
   displayData,
   fetchRecords,
@@ -25,7 +25,7 @@ const Component = ({
   selectedRows,
   setSelectedRecords,
   totalRecords
-}) => {
+}) {
   const { online } = useApp();
   const rowsPerPage = perPage > MAX_OFFLINE_ROWS_PER_PAGE && !online ? MAX_OFFLINE_ROWS_PER_PAGE : perPage;
   const dispatch = useDispatch();
@@ -114,7 +114,7 @@ const Component = ({
       </div>
     </div>
   );
-};
+}
 
 Component.propTypes = {
   canSelectAll: PropTypes.bool,
diff --git a/app/javascript/components/insights-filters/component.js b/app/javascript/components/insights-filters/component.js
index b128ce6462..a25d04eb7f 100644
--- a/app/javascript/components/insights-filters/component.js
+++ b/app/javascript/components/insights-filters/component.js
@@ -41,7 +41,7 @@ import css from "./styles.css";
 import { transformFilters } from "./utils";
 import validations from "./validations";
 
-const Component = ({ moduleID, id, subReport, toggleControls }) => {
+function Component({ moduleID, id, subReport, toggleControls }) {
   const isManagedReportScopeAll = useMemoizedSelector(state => getIsManagedReportScopeAll(state));
   const canReadUserGroups = usePermissions(RESOURCES.user_groups, READ_RECORDS);
   const userGroups = useOptions({ source: OPTION_TYPES.INSIGHTS_USER_GROUP_PERMITTED });
@@ -155,7 +155,7 @@ const Component = ({ moduleID, id, subReport, toggleControls }) => {
       </div>
     </form>
   );
-};
+}
 
 Component.displayName = "InsightsFilters";
 
diff --git a/app/javascript/components/insights-filters/components/insight-filter-tags.jsx b/app/javascript/components/insights-filters/components/insight-filter-tags.jsx
index 8df7cf04e6..1e347a35b7 100644
--- a/app/javascript/components/insights-filters/components/insight-filter-tags.jsx
+++ b/app/javascript/components/insights-filters/components/insight-filter-tags.jsx
@@ -17,7 +17,7 @@ import { WORKFLOW } from "../../insights/constants";
 
 import css from "./styles.css";
 
-const InsightFilterTags = ({ filters = [], moduleID }) => {
+function InsightFilterTags({ filters = [], moduleID }) {
   const i18n = useI18n();
   const workflowLabels = useMemoizedSelector(state => getWorkflowLabels(state, moduleID, RECORD_TYPES.cases));
   const insightFilters = useMemoizedSelector(state => selectInsightsFilters(state));
@@ -101,7 +101,7 @@ const InsightFilterTags = ({ filters = [], moduleID }) => {
       })}
     </div>
   );
-};
+}
 
 InsightFilterTags.displayName = "InsightFilterTags";
 
diff --git a/app/javascript/components/insights-list/container.jsx b/app/javascript/components/insights-list/container.jsx
index 38c98fccdf..6ad41afe75 100644
--- a/app/javascript/components/insights-list/container.jsx
+++ b/app/javascript/components/insights-list/container.jsx
@@ -16,7 +16,7 @@ import { fetchInsights } from "./action-creators";
 import { selectInsights, selectLoading } from "./selectors";
 import NAMESPACE from "./namespace";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const insights = useMemoizedSelector(state => selectInsights(state));
@@ -60,7 +60,7 @@ const Container = () => {
       </PageContainer>
     </div>
   );
-};
+}
 
 Container.displayName = "InsightsList";
 
diff --git a/app/javascript/components/insights-sub-report/components/exporter/exporter.jsx b/app/javascript/components/insights-sub-report/components/exporter/exporter.jsx
index 37f8466115..0f1a6fd8ca 100644
--- a/app/javascript/components/insights-sub-report/components/exporter/exporter.jsx
+++ b/app/javascript/components/insights-sub-report/components/exporter/exporter.jsx
@@ -10,7 +10,7 @@ import css from "./styles.css";
 import { downloadFile, tableToCsv } from "./utils";
 import { DEFAULT_FILE_NAME, NAME } from "./constants";
 
-const Exporter = ({ includesGraph = false }) => {
+function Exporter({ includesGraph = false }) {
   const handleClickTableExporter = () => {
     const csvBlob = new Blob([tableToCsv("table tr")], { type: "text/csv" });
 
@@ -55,7 +55,7 @@ const Exporter = ({ includesGraph = false }) => {
       />
     </>
   );
-};
+}
 
 Exporter.displayName = NAME;
 
diff --git a/app/javascript/components/insights-sub-report/components/insights-table-header-sub-items/component.jsx b/app/javascript/components/insights-sub-report/components/insights-table-header-sub-items/component.jsx
index 54400ca338..a1101f25d9 100644
--- a/app/javascript/components/insights-sub-report/components/insights-table-header-sub-items/component.jsx
+++ b/app/javascript/components/insights-sub-report/components/insights-table-header-sub-items/component.jsx
@@ -11,7 +11,7 @@ import { useI18n } from "../../../i18n";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const InsightsTableHeaderSubItems = ({ addEmptyCell = true, groupedSubItemcolumns }) => {
+function InsightsTableHeaderSubItems({ addEmptyCell = true, groupedSubItemcolumns }) {
   const i18n = useI18n();
 
   if (isEmpty(groupedSubItemcolumns)) {
@@ -41,7 +41,7 @@ const InsightsTableHeaderSubItems = ({ addEmptyCell = true, groupedSubItemcolumn
       )}
     </TableRow>
   );
-};
+}
 
 InsightsTableHeaderSubItems.displayName = NAME;
 
diff --git a/app/javascript/components/insights-sub-report/components/insights-table-header/component.jsx b/app/javascript/components/insights-sub-report/components/insights-table-header/component.jsx
index 30639e9245..a10355db88 100644
--- a/app/javascript/components/insights-sub-report/components/insights-table-header/component.jsx
+++ b/app/javascript/components/insights-sub-report/components/insights-table-header/component.jsx
@@ -11,7 +11,7 @@ import { buildGroupedSubItemColumns } from "../../utils";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const InsightsTableHeader = ({ addEmptyCell = true, columns, subColumnItemsSize }) => {
+function InsightsTableHeader({ addEmptyCell = true, columns, subColumnItemsSize }) {
   const groupedSubcolumns = columns.reduce((acc, column) => ({ ...acc, [column.label]: column.items }), {});
   const groupedSubItemcolumns = buildGroupedSubItemColumns(columns);
   const classesEmptyCell = clsx({ [css.emptyCell]: Boolean(subColumnItemsSize) });
@@ -47,7 +47,7 @@ const InsightsTableHeader = ({ addEmptyCell = true, columns, subColumnItemsSize
       <InsightsTableHeaderSubItems groupedSubItemcolumns={groupedSubItemcolumns} />
     </>
   );
-};
+}
 
 InsightsTableHeader.displayName = NAME;
 
diff --git a/app/javascript/components/insights-sub-report/container.jsx b/app/javascript/components/insights-sub-report/container.jsx
index a46b2c1d00..e63d85b43d 100644
--- a/app/javascript/components/insights-sub-report/container.jsx
+++ b/app/javascript/components/insights-sub-report/container.jsx
@@ -37,7 +37,7 @@ import css from "./styles.css";
 import { setSubReport } from "./action-creators";
 import getSubcolumnItems from "./utils/get-subcolumn-items";
 
-const Component = () => {
+function Component() {
   const { id, subReport } = useParams();
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -242,7 +242,7 @@ const Component = () => {
       </LoadingIndicator>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/insights/component.jsx b/app/javascript/components/insights/component.jsx
index b4eb02309c..9faa013ca4 100644
--- a/app/javascript/components/insights/component.jsx
+++ b/app/javascript/components/insights/component.jsx
@@ -27,7 +27,7 @@ import { INSIGHTS_CONFIG, NAME, INSIGHTS_EXPORTER_DIALOG, MANAGED_REPORTS, REPOR
 import css from "./styles.css";
 import InsightsExporter from "./components/insights-exporter";
 
-const Component = ({ routes }) => {
+function Component({ routes }) {
   const { id, moduleID } = useParams();
   const i18n = useI18n();
   const { pathname } = useLocation();
@@ -116,7 +116,7 @@ const Component = ({ routes }) => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/insights/components/exporter.jsx b/app/javascript/components/insights/components/exporter.jsx
index faec8ad430..d63cc54f17 100644
--- a/app/javascript/components/insights/components/exporter.jsx
+++ b/app/javascript/components/insights/components/exporter.jsx
@@ -10,7 +10,7 @@ import css from "./styles.css";
 import { downloadFile, tableToCsv } from "./utils";
 import { DEFAULT_FILE_NAME, NAME } from "./constants";
 
-const Exporter = ({ includesGraph = false }) => {
+function Exporter({ includesGraph = false }) {
   const handleClickTableExporter = () => {
     const csvBlob = new Blob([tableToCsv("table tr")], { type: "text/csv" });
 
@@ -55,7 +55,7 @@ const Exporter = ({ includesGraph = false }) => {
       />
     </>
   );
-};
+}
 
 Exporter.displayName = NAME;
 
diff --git a/app/javascript/components/insights/components/insights-exporter/component.jsx b/app/javascript/components/insights/components/insights-exporter/component.jsx
index ac9c5f8a1d..f074bd52c5 100644
--- a/app/javascript/components/insights/components/insights-exporter/component.jsx
+++ b/app/javascript/components/insights/components/insights-exporter/component.jsx
@@ -18,7 +18,7 @@ import { transformFilters } from "../../../insights-filters/utils";
 import { NAME, FORM_ID, EXPORTED_URL, EXPORT_ALL_SUBREPORTS } from "./constants";
 import { form } from "./form";
 
-const Component = ({ close, i18n, open, pending, setPending }) => {
+function Component({ close, i18n, open, pending, setPending }) {
   const dispatch = useDispatch();
   const { id } = useParams();
   const dialogPending = typeof pending === "object" ? pending.get("pending") : pending;
@@ -68,7 +68,7 @@ const Component = ({ close, i18n, open, pending, setPending }) => {
       <Form useCancelPrompt formID={FORM_ID} mode="new" formSections={form(i18n)} onSubmit={onSubmit} submitAlways />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/internal-alert/component.jsx b/app/javascript/components/internal-alert/component.jsx
index 18b200ca09..599c712b2b 100644
--- a/app/javascript/components/internal-alert/component.jsx
+++ b/app/javascript/components/internal-alert/component.jsx
@@ -18,7 +18,7 @@ import InternalAlertItem from "./components/item";
 import { NAME, SEVERITY } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ title, items = fromJS([]), severity = "info", customIcon }) => {
+function Component({ title, items = fromJS([]), severity = "info", customIcon }) {
   const i18n = useI18n();
 
   const accordionClasses = clsx(css.alert, css[severity]);
@@ -90,7 +90,7 @@ const Component = ({ title, items = fromJS([]), severity = "info", customIcon })
       {renderItems()}
     </Accordion>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/internal-alert/components/dismiss-button/component.jsx b/app/javascript/components/internal-alert/components/dismiss-button/component.jsx
index 7e338855e0..4a4e48917e 100644
--- a/app/javascript/components/internal-alert/components/dismiss-button/component.jsx
+++ b/app/javascript/components/internal-alert/components/dismiss-button/component.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import css from "./styles.css";
 
-const Component = ({ handler }) => {
+function Component({ handler }) {
   const handlerWrapper = event => {
     event.stopPropagation();
     handler();
@@ -15,7 +15,7 @@ const Component = ({ handler }) => {
       <CloseIcon />
     </IconButton>
   );
-};
+}
 
 Component.displayName = "InternalAlertDismissButton";
 Component.propTypes = {
diff --git a/app/javascript/components/internal-alert/components/item/component.jsx b/app/javascript/components/internal-alert/components/item/component.jsx
index ed347a2715..ee75f64f51 100644
--- a/app/javascript/components/internal-alert/components/item/component.jsx
+++ b/app/javascript/components/internal-alert/components/item/component.jsx
@@ -4,14 +4,14 @@ import InternalAlertDismissButton from "../dismiss-button";
 
 import css from "./styles.css";
 
-const Component = ({ item }) => {
+function Component({ item }) {
   return (
     <div className={css.alertItemElement}>
       <span>{item.get("message")}</span>
       {item.get("onDismiss") && InternalAlertDismissButton({ handler: item.get("onDismiss") })}
     </div>
   );
-};
+}
 
 Component.displayName = "InternalAlertItem";
 Component.propTypes = {
diff --git a/app/javascript/components/jewel/component.jsx b/app/javascript/components/jewel/component.jsx
index b2df0181c1..54f4c1a687 100644
--- a/app/javascript/components/jewel/component.jsx
+++ b/app/javascript/components/jewel/component.jsx
@@ -6,7 +6,7 @@ import { Brightness1 as Circle } from "@mui/icons-material";
 
 import css from "./styles.css";
 
-const Jewel = ({ value, isForm, isList, isError }) => {
+function Jewel({ value, isForm, isList, isError }) {
   const classes = clsx(css.circleForm, css.error);
 
   if (isList) {
@@ -38,7 +38,7 @@ const Jewel = ({ value, isForm, isList, isError }) => {
       )}
     </>
   );
-};
+}
 
 Jewel.displayName = "Jewel";
 
diff --git a/app/javascript/components/key-performance-indicators/component.jsx b/app/javascript/components/key-performance-indicators/component.jsx
index 9e9a7cd159..21878e6ca7 100644
--- a/app/javascript/components/key-performance-indicators/component.jsx
+++ b/app/javascript/components/key-performance-indicators/component.jsx
@@ -25,7 +25,7 @@ import ClientSatisfactionRate from "./components/client-satisfaction-rate";
 import SupervisorToCaseworkerRatio from "./components/supervisor-to-caseworker-ratio";
 import CaseLoad from "./components/case-load";
 
-const KeyPerformanceIndicators = () => {
+function KeyPerformanceIndicators() {
   const i18n = useI18n();
 
   const commonDateRanges = CommonDateRanges.from(new Date(), i18n);
@@ -184,7 +184,7 @@ const KeyPerformanceIndicators = () => {
       </PageContainer>
     </div>
   );
-};
+}
 
 KeyPerformanceIndicators.displayName = "KeyPerformanceIndicators";
 
diff --git a/app/javascript/components/key-performance-indicators/components/as-key-performance-indicator/component.spec.js b/app/javascript/components/key-performance-indicators/components/as-key-performance-indicator/component.spec.js
index 60820b08fe..49eb11c796 100644
--- a/app/javascript/components/key-performance-indicators/components/as-key-performance-indicator/component.spec.js
+++ b/app/javascript/components/key-performance-indicators/components/as-key-performance-indicator/component.spec.js
@@ -10,8 +10,11 @@ import asKeyPerformanceIndicator from "./component";
 
 describe("asKeyPerformanceIndicator()", () => {
   const identifier = "test";
+
   // eslint-disable-next-line react/display-name
-  const Component = () => <h1>Component</h1>;
+  function Component() {
+    return <h1>Component</h1>;
+  }
   const permittedAction = "test";
   const KPI = asKeyPerformanceIndicator(identifier, {}, permittedAction)(Component);
 
diff --git a/app/javascript/components/key-performance-indicators/components/assessment-status/component.jsx b/app/javascript/components/key-performance-indicators/components/assessment-status/component.jsx
index 442ace974b..88dbf35add 100644
--- a/app/javascript/components/key-performance-indicators/components/assessment-status/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/assessment-status/component.jsx
@@ -7,7 +7,7 @@ import StackedPercentageBar from "../stacked-percentage-bar";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -20,7 +20,7 @@ const Component = ({ data, identifier }) => {
       ]}
     />
   );
-};
+}
 
 Component.displayName = "AssessmentStatus";
 
diff --git a/app/javascript/components/key-performance-indicators/components/average-followup-meetings-per-case/component.jsx b/app/javascript/components/key-performance-indicators/components/average-followup-meetings-per-case/component.jsx
index ded80aa19e..553f98b2e3 100644
--- a/app/javascript/components/key-performance-indicators/components/average-followup-meetings-per-case/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/average-followup-meetings-per-case/component.jsx
@@ -7,7 +7,7 @@ import SingleAggregateMetric from "../single-aggregate-metric";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -16,7 +16,7 @@ const Component = ({ data, identifier }) => {
       label={i18n.t(`key_performance_indicators.${identifier}.label`)}
     />
   );
-};
+}
 
 Component.displayName = "AverageFollowupMeetingsPerCase";
 
diff --git a/app/javascript/components/key-performance-indicators/components/average-referrals/component.jsx b/app/javascript/components/key-performance-indicators/components/average-referrals/component.jsx
index ee5e4550b8..319d43cdef 100644
--- a/app/javascript/components/key-performance-indicators/components/average-referrals/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/average-referrals/component.jsx
@@ -7,7 +7,7 @@ import SingleAggregateMetric from "../single-aggregate-metric";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -16,7 +16,7 @@ const Component = ({ data, identifier }) => {
       label={i18n.t(`key_performance_indicators.${identifier}.label`)}
     />
   );
-};
+}
 
 Component.displayName = "AverageReferrals";
 
diff --git a/app/javascript/components/key-performance-indicators/components/case-closure-rate/component.jsx b/app/javascript/components/key-performance-indicators/components/case-closure-rate/component.jsx
index bba12e9127..902dde598d 100644
--- a/app/javascript/components/key-performance-indicators/components/case-closure-rate/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/case-closure-rate/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const columns = [
@@ -31,7 +31,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => row.get(column.name)));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "CaseClosureRate";
 
diff --git a/app/javascript/components/key-performance-indicators/components/case-load/component.jsx b/app/javascript/components/key-performance-indicators/components/case-load/component.jsx
index 7d1b950731..c5de455c2e 100644
--- a/app/javascript/components/key-performance-indicators/components/case-load/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/case-load/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const columns = [
@@ -26,7 +26,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => column.transform(row.get(column.name))));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "CaseLoad";
 
diff --git a/app/javascript/components/key-performance-indicators/components/client-satisfaction-rate/component.jsx b/app/javascript/components/key-performance-indicators/components/client-satisfaction-rate/component.jsx
index 3dba84b674..99193dce97 100644
--- a/app/javascript/components/key-performance-indicators/components/client-satisfaction-rate/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/client-satisfaction-rate/component.jsx
@@ -9,7 +9,7 @@ import { ACTIONS } from "../../../permissions";
 
 import css from "./styles.css";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const rate = data.get("data").get("satisfaction_rate");
@@ -27,7 +27,7 @@ const Component = ({ data, identifier }) => {
       ]}
     />
   );
-};
+}
 
 Component.displayName = "ClientSatisfactionRate";
 
diff --git a/app/javascript/components/key-performance-indicators/components/completed-case-action-plan/component.jsx b/app/javascript/components/key-performance-indicators/components/completed-case-action-plan/component.jsx
index 4bac86490f..fc2eee7901 100644
--- a/app/javascript/components/key-performance-indicators/components/completed-case-action-plan/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/completed-case-action-plan/component.jsx
@@ -7,7 +7,7 @@ import StackedPercentageBar from "../stacked-percentage-bar";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -20,7 +20,7 @@ const Component = ({ data, identifier }) => {
       ]}
     />
   );
-};
+}
 
 Component.displayName = "CompletedCaseActionPlan";
 
diff --git a/app/javascript/components/key-performance-indicators/components/completed-case-safety-plan/component.jsx b/app/javascript/components/key-performance-indicators/components/completed-case-safety-plan/component.jsx
index 6024e54a5f..052e7f0b63 100644
--- a/app/javascript/components/key-performance-indicators/components/completed-case-safety-plan/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/completed-case-safety-plan/component.jsx
@@ -7,7 +7,7 @@ import StackedPercentageBar from "../stacked-percentage-bar";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -20,7 +20,7 @@ const Component = ({ data, identifier }) => {
       ]}
     />
   );
-};
+}
 
 Component.displayName = "CompletedCaseSafetyPlan";
 
diff --git a/app/javascript/components/key-performance-indicators/components/completed-supervisor-approved-case-action-plan/component.jsx b/app/javascript/components/key-performance-indicators/components/completed-supervisor-approved-case-action-plan/component.jsx
index 5fbcb690d9..d1d6ac6d84 100644
--- a/app/javascript/components/key-performance-indicators/components/completed-supervisor-approved-case-action-plan/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/completed-supervisor-approved-case-action-plan/component.jsx
@@ -7,7 +7,7 @@ import StackedPercentageBar from "../stacked-percentage-bar";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   return (
@@ -20,7 +20,7 @@ const Component = ({ data, identifier }) => {
       ]}
     />
   );
-};
+}
 
 Component.displayName = "CompletedSupervisorApprovedCaseActionPlan";
 
diff --git a/app/javascript/components/key-performance-indicators/components/date-range-dialog/component.jsx b/app/javascript/components/key-performance-indicators/components/date-range-dialog/component.jsx
index 7ab8193a10..87c98b0911 100644
--- a/app/javascript/components/key-performance-indicators/components/date-range-dialog/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/date-range-dialog/component.jsx
@@ -17,7 +17,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { useI18n } from "../../../i18n";
 import { DATE_FORMAT } from "../../../../config";
 
-const Component = ({ open, onClose, currentRange, setRange }) => {
+function Component({ open, onClose, currentRange, setRange }) {
   const i18n = useI18n();
   const [from, setFrom] = useState(currentRange.from);
   const [to, setTo] = useState(currentRange.to);
@@ -68,7 +68,7 @@ const Component = ({ open, onClose, currentRange, setRange }) => {
       </DialogActions>
     </Dialog>
   );
-};
+}
 
 Component.displayName = "DateRangeDialog";
 
diff --git a/app/javascript/components/key-performance-indicators/components/date-range-select/component.jsx b/app/javascript/components/key-performance-indicators/components/date-range-select/component.jsx
index a10aad7a4d..a1b435e436 100644
--- a/app/javascript/components/key-performance-indicators/components/date-range-select/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/date-range-select/component.jsx
@@ -9,7 +9,7 @@ import DateRange from "../../utils/date-range";
 
 import { CUSTOM_RANGE } from "./constants";
 
-const Component = ({ ranges, selectedRange, withCustomRange, setSelectedRange, disabled, i18n }) => {
+function Component({ ranges, selectedRange, withCustomRange, setSelectedRange, disabled, i18n }) {
   const [showRangePicker, setShowRangePicker] = useState(false);
 
   const [customRange, setCustomRange] = useState(
@@ -88,7 +88,7 @@ const Component = ({ ranges, selectedRange, withCustomRange, setSelectedRange, d
       />
     </FormControl>
   );
-};
+}
 
 Component.displayName = "DateRangeSelect";
 
diff --git a/app/javascript/components/key-performance-indicators/components/goal-progress-per-need/component.jsx b/app/javascript/components/key-performance-indicators/components/goal-progress-per-need/component.jsx
index ec7459264a..71171b62b2 100644
--- a/app/javascript/components/key-performance-indicators/components/goal-progress-per-need/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/goal-progress-per-need/component.jsx
@@ -8,7 +8,7 @@ import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import PercentageCell from "../percentage-cell";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
   const columns = [
     {
@@ -27,7 +27,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => row.get(column.name)));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "GoalProgressPerNeed";
 
diff --git a/app/javascript/components/key-performance-indicators/components/kpi-table/component.jsx b/app/javascript/components/key-performance-indicators/components/kpi-table/component.jsx
index 7ad70edb8c..309ee0d5de 100644
--- a/app/javascript/components/key-performance-indicators/components/kpi-table/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/kpi-table/component.jsx
@@ -7,7 +7,9 @@ import { DashboardTable } from "../../../dashboard";
 // Simple wrapper over DashboardTable to insulate Kpis from future
 // changes to serve the Dashbaord needs. Can be migrated to MUIDataTable
 // at some point when the needs differ enough.
-const Component = ({ columns, data }) => <DashboardTable columns={columns} data={data} pathname="" />;
+function Component({ columns, data }) {
+  return <DashboardTable columns={columns} data={data} pathname="" />;
+}
 
 Component.displayName = "KpiTable";
 
diff --git a/app/javascript/components/key-performance-indicators/components/number-of-cases/component.jsx b/app/javascript/components/key-performance-indicators/components/number-of-cases/component.jsx
index 67645ed902..d8449c37b0 100644
--- a/app/javascript/components/key-performance-indicators/components/number-of-cases/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/number-of-cases/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const columns = [
@@ -31,7 +31,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => row.get(column.name)));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "NumberOfCases";
 
diff --git a/app/javascript/components/key-performance-indicators/components/number-of-incidents/component.jsx b/app/javascript/components/key-performance-indicators/components/number-of-incidents/component.jsx
index 40f1f1be16..3c0b0d5b44 100644
--- a/app/javascript/components/key-performance-indicators/components/number-of-incidents/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/number-of-incidents/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
   const columns = [
     {
@@ -30,7 +30,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => row.get(column.name)));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "NumberOfIncidents";
 
diff --git a/app/javascript/components/key-performance-indicators/components/percentage-cell/component.jsx b/app/javascript/components/key-performance-indicators/components/percentage-cell/component.jsx
index 0dfed2ac3f..edfa0b46a1 100644
--- a/app/javascript/components/key-performance-indicators/components/percentage-cell/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/percentage-cell/component.jsx
@@ -2,9 +2,9 @@
 
 import TablePercentageBar from "../table-percentage-bar";
 
-const Component = value => {
+function Component(value) {
   return <TablePercentageBar percentage={value} />;
-};
+}
 
 Component.displayName = "PercentageCell";
 
diff --git a/app/javascript/components/key-performance-indicators/components/reporting-delay/component.jsx b/app/javascript/components/key-performance-indicators/components/reporting-delay/component.jsx
index a15bb1d7bc..0ae0d93759 100644
--- a/app/javascript/components/key-performance-indicators/components/reporting-delay/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/reporting-delay/component.jsx
@@ -8,7 +8,7 @@ import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import PercentageCell from "../percentage-cell";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const columns = [
@@ -38,7 +38,7 @@ const Component = ({ data, identifier }) => {
   });
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "ReportingDelay";
 
diff --git a/app/javascript/components/key-performance-indicators/components/services-provided/component.jsx b/app/javascript/components/key-performance-indicators/components/services-provided/component.jsx
index 589fe4cf5b..993e3eedca 100644
--- a/app/javascript/components/key-performance-indicators/components/services-provided/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/services-provided/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const toColumn = name => ({
@@ -33,7 +33,7 @@ const Component = ({ data, identifier }) => {
     .map(row => columns.map(column => row.get(column.name)));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "ServicesProvided";
 
diff --git a/app/javascript/components/key-performance-indicators/components/single-aggregate-metric/component.jsx b/app/javascript/components/key-performance-indicators/components/single-aggregate-metric/component.jsx
index 46d5e9ff23..c8c8ca3b40 100644
--- a/app/javascript/components/key-performance-indicators/components/single-aggregate-metric/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/single-aggregate-metric/component.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import css from "./styles.css";
 
-const Component = ({ value, label }) => {
+function Component({ value, label }) {
   const shouldTrucate = value?.toFixed && value.toString().indexOf(".") > -1;
   const displayValue = shouldTrucate ? value.toFixed(1) : value;
 
@@ -14,7 +14,7 @@ const Component = ({ value, label }) => {
       <span className={css.label}>{label}</span>
     </div>
   );
-};
+}
 
 Component.displayName = "SingleAggregateMetric";
 
diff --git a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/component.jsx b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/component.jsx
index 9f6d062971..b9dd42ee82 100644
--- a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/component.jsx
@@ -6,7 +6,7 @@ import css from "./styles.css";
 import StackedPercentageBarMeter from "./components/stacked-percentage-bar-meter";
 import StackedPercentageBarLabel from "./components/stacked-percentage-bar-label";
 
-const Component = ({ percentages, className }) => {
+function Component({ percentages, className }) {
   if (percentages.length > 2) throw new Error("StackedPercentageBar components only support a max of 2 percentages");
 
   const percentagedToRender = percentages.filter(descriptor => descriptor.percentage > 0);
@@ -36,7 +36,7 @@ const Component = ({ percentages, className }) => {
       </div>
     </div>
   );
-};
+}
 
 Component.displayName = "StackedPercentageBar";
 
diff --git a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-label/component.jsx b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-label/component.jsx
index 3cf8593be7..92831f5fa7 100644
--- a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-label/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-label/component.jsx
@@ -2,7 +2,7 @@
 
 import PropTypes from "prop-types";
 
-const Component = ({ realPercent, label, index, css }) => {
+function Component({ realPercent, label, index, css }) {
   const percentage = realPercent * 100;
   const style = { width: percentage > 0 ? `${percentage}%` : "auto" };
 
@@ -14,7 +14,7 @@ const Component = ({ realPercent, label, index, css }) => {
       <div className={css.StackedPercentageBarLabel}>{label}</div>
     </div>
   );
-};
+}
 
 Component.displayName = "StackedPercentageBarLabel";
 
diff --git a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-meter/component.jsx b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-meter/component.jsx
index 30f4cc1102..5250ae6fc7 100644
--- a/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-meter/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/stacked-percentage-bar/components/stacked-percentage-bar-meter/component.jsx
@@ -2,12 +2,12 @@
 
 import PropTypes from "prop-types";
 
-const Component = ({ realPercent, index, css }) => {
+function Component({ realPercent, index, css }) {
   const percentage = realPercent * 100;
   const style = { width: `${percentage}%` };
 
   return <div key={index} className={css[`StackedPercentageBar${index + 1}Complete`]} style={style} />;
-};
+}
 
 Component.displayName = "StackedPercentageBarMeter";
 
diff --git a/app/javascript/components/key-performance-indicators/components/supervisor-to-caseworker-ratio/component.jsx b/app/javascript/components/key-performance-indicators/components/supervisor-to-caseworker-ratio/component.jsx
index abdd35e410..18b2f4bfca 100644
--- a/app/javascript/components/key-performance-indicators/components/supervisor-to-caseworker-ratio/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/supervisor-to-caseworker-ratio/component.jsx
@@ -7,7 +7,7 @@ import SingleAggregateMetric from "../single-aggregate-metric";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
   const supervisors = data.get("data").get("supervisors");
   const caseWorkers = data.get("data").get("case_workers");
@@ -18,7 +18,7 @@ const Component = ({ data, identifier }) => {
       label={i18n.t(`key_performance_indicators.${identifier}.label`)}
     />
   );
-};
+}
 
 Component.displayName = "SupervisorToCaseworkerRatio";
 
diff --git a/app/javascript/components/key-performance-indicators/components/table-percentage-bar/component.jsx b/app/javascript/components/key-performance-indicators/components/table-percentage-bar/component.jsx
index a1b96061cd..2fb2aec9f2 100644
--- a/app/javascript/components/key-performance-indicators/components/table-percentage-bar/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/table-percentage-bar/component.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import css from "./styles.css";
 
-const Component = ({ percentage, className }) => {
+function Component({ percentage, className }) {
   const percentageValue = percentage * 100;
   const isSmall = percentage < 0.1;
 
@@ -22,7 +22,7 @@ const Component = ({ percentage, className }) => {
       </div>
     </div>
   );
-};
+}
 
 Component.displayName = "TablePercentageBar";
 
diff --git a/app/javascript/components/key-performance-indicators/components/time-from-case-open-to-case-close/component.jsx b/app/javascript/components/key-performance-indicators/components/time-from-case-open-to-case-close/component.jsx
index 96058de4e3..dfed5bf702 100644
--- a/app/javascript/components/key-performance-indicators/components/time-from-case-open-to-case-close/component.jsx
+++ b/app/javascript/components/key-performance-indicators/components/time-from-case-open-to-case-close/component.jsx
@@ -7,7 +7,7 @@ import KpiTable from "../kpi-table";
 import asKeyPerformanceIndicator from "../as-key-performance-indicator";
 import { ACTIONS } from "../../../permissions";
 
-const Component = ({ data, identifier }) => {
+function Component({ data, identifier }) {
   const i18n = useI18n();
 
   const columns = [
@@ -26,7 +26,7 @@ const Component = ({ data, identifier }) => {
   const rows = data.get("data").map(row => columns.map(column => column.transform(row.get(column.name))));
 
   return <KpiTable columns={columns} data={rows} />;
-};
+}
 
 Component.displayName = "TimeFromCaseOpenToClose";
 
diff --git a/app/javascript/components/layouts/component.jsx b/app/javascript/components/layouts/component.jsx
index fe63f0c492..dc0e0885c8 100644
--- a/app/javascript/components/layouts/component.jsx
+++ b/app/javascript/components/layouts/component.jsx
@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
 
 import CustomSnackbarProvider from "../custom-snackbar-provider";
 
-const Component = ({ layout: Layout, children }) => {
+function Component({ layout: Layout, children }) {
   return (
     <CustomSnackbarProvider>
       <Layout>{children}</Layout>
     </CustomSnackbarProvider>
   );
-};
+}
 
 Component.propTypes = {
   children: PropTypes.node,
diff --git a/app/javascript/components/layouts/components/app-layout/component.jsx b/app/javascript/components/layouts/components/app-layout/component.jsx
index 780b3e6e8c..103ea9597a 100644
--- a/app/javascript/components/layouts/components/app-layout/component.jsx
+++ b/app/javascript/components/layouts/components/app-layout/component.jsx
@@ -18,7 +18,7 @@ import usePushNotifications from "../../../push-notifications-toggle/use-push-no
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ children }) => {
+function Component({ children }) {
   const { demo } = useApp();
 
   usePushNotifications();
@@ -48,7 +48,7 @@ const Component = ({ children }) => {
       </div>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/layouts/components/empty-layout/component.jsx b/app/javascript/components/layouts/components/empty-layout/component.jsx
index 2d32875be6..32c10de23a 100644
--- a/app/javascript/components/layouts/components/empty-layout/component.jsx
+++ b/app/javascript/components/layouts/components/empty-layout/component.jsx
@@ -7,7 +7,7 @@ import { useApp } from "../../../application";
 import DemoIndicator from "../../../demo-indicator";
 import SessionTimeoutDialog from "../../../session-timeout-dialog";
 
-const Component = ({ children }) => {
+function Component({ children }) {
   const { demo } = useApp();
 
   return (
@@ -17,7 +17,7 @@ const Component = ({ children }) => {
       <SessionTimeoutDialog data-testid="session-time-dialog" />
     </>
   );
-};
+}
 
 Component.displayName = "EmptyLayout";
 
diff --git a/app/javascript/components/layouts/components/login-layout/component.jsx b/app/javascript/components/layouts/components/login-layout/component.jsx
index ca3ae0d68e..743c5dd45f 100644
--- a/app/javascript/components/layouts/components/login-layout/component.jsx
+++ b/app/javascript/components/layouts/components/login-layout/component.jsx
@@ -16,7 +16,7 @@ import LoginLayoutFooter from "../login-layout-footer";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ children }) => {
+function Component({ children }) {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
   const { demo, hasLoginLogo, useContainedNavStyle } = useApp();
   const hasLogos = useMemoizedSelector(state => hasAgencyLogos(state));
@@ -55,7 +55,7 @@ const Component = ({ children }) => {
       </div>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/lightbox/component.jsx b/app/javascript/components/lightbox/component.jsx
index cdbd8ba3e5..6d049fab6e 100644
--- a/app/javascript/components/lightbox/component.jsx
+++ b/app/javascript/components/lightbox/component.jsx
@@ -7,7 +7,7 @@ import CloseIcon from "@mui/icons-material/Close";
 
 import css from "./styles.css";
 
-const Component = ({ trigger, image }) => {
+function Component({ trigger, image }) {
   const [open, setOpen] = useState(false);
 
   const handleClose = () => {
@@ -31,7 +31,7 @@ const Component = ({ trigger, image }) => {
       )}
     </>
   );
-};
+}
 
 Component.displayName = "Lightbox";
 
diff --git a/app/javascript/components/list-icon/component.jsx b/app/javascript/components/list-icon/component.jsx
index 731457d2f5..6913a6e862 100644
--- a/app/javascript/components/list-icon/component.jsx
+++ b/app/javascript/components/list-icon/component.jsx
@@ -30,7 +30,7 @@ import {
   RegistryRecordIcon
 } from "../../images/primero-icons";
 
-const ListIcon = ({ icon }) => {
+function ListIcon({ icon }) {
   switch (icon) {
     case "home":
       return <Home />;
@@ -83,7 +83,7 @@ const ListIcon = ({ icon }) => {
     default:
       return null;
   }
-};
+}
 
 ListIcon.displayName = "ListIcon";
 
diff --git a/app/javascript/components/loading-indicator/components/empty-state.jsx b/app/javascript/components/loading-indicator/components/empty-state.jsx
index afb5e50054..03b138043f 100644
--- a/app/javascript/components/loading-indicator/components/empty-state.jsx
+++ b/app/javascript/components/loading-indicator/components/empty-state.jsx
@@ -6,7 +6,7 @@ import { useI18n } from "../../i18n";
 import ListIcon from "../../list-icon";
 import css from "../styles.css";
 
-const EmptyState = ({ emptyMessage, type }) => {
+function EmptyState({ emptyMessage, type }) {
   const i18n = useI18n();
 
   return (
@@ -17,7 +17,7 @@ const EmptyState = ({ emptyMessage, type }) => {
       </div>
     </div>
   );
-};
+}
 
 EmptyState.displayName = "EmptyState";
 
diff --git a/app/javascript/components/loading-indicator/loading.jsx b/app/javascript/components/loading-indicator/loading.jsx
index c24662c49b..ee5beffd07 100644
--- a/app/javascript/components/loading-indicator/loading.jsx
+++ b/app/javascript/components/loading-indicator/loading.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator, loading, classes }) => {
+function Component({ loadingIndicator, loading, classes }) {
   const transitionDelayStyles = {
     transitionDelay: loading ? "800ms" : "0ms"
   };
@@ -19,7 +19,7 @@ const Component = ({ loadingIndicator, loading, classes }) => {
       </Fade>
     )
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/login-dialog/component.jsx b/app/javascript/components/login-dialog/component.jsx
index 245936be63..fe2cb32bf5 100644
--- a/app/javascript/components/login-dialog/component.jsx
+++ b/app/javascript/components/login-dialog/component.jsx
@@ -9,7 +9,7 @@ import utils from "../login/utils";
 
 import { LOGIN_DIALOG } from "./constants";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const { demo } = useApp();
 
@@ -35,7 +35,7 @@ const Component = () => {
       <Login modal />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = "LoginDialog";
 
diff --git a/app/javascript/components/login/components/idp-selection/components/primero-idp-link.jsx b/app/javascript/components/login/components/idp-selection/components/primero-idp-link.jsx
index 203f753170..ffe1ef64ab 100644
--- a/app/javascript/components/login/components/idp-selection/components/primero-idp-link.jsx
+++ b/app/javascript/components/login/components/idp-selection/components/primero-idp-link.jsx
@@ -12,7 +12,7 @@ import { signIn } from "../auth-provider";
 import { useApp } from "../../../../application";
 import DisableOffline from "../../../../disable-offline";
 
-const PrimeroIdpLink = ({ identityProviders, i18n, dispatch, css }) => {
+function PrimeroIdpLink({ identityProviders, i18n, dispatch, css }) {
   const history = useHistory();
   const { online } = useApp();
 
@@ -47,7 +47,7 @@ const PrimeroIdpLink = ({ identityProviders, i18n, dispatch, css }) => {
       )}
     </div>
   );
-};
+}
 
 PrimeroIdpLink.displayName = "PrimeroIdpLink";
 
diff --git a/app/javascript/components/login/components/idp-selection/components/primero-idp-select.jsx b/app/javascript/components/login/components/idp-selection/components/primero-idp-select.jsx
index f8b91045df..07c319de95 100644
--- a/app/javascript/components/login/components/idp-selection/components/primero-idp-select.jsx
+++ b/app/javascript/components/login/components/idp-selection/components/primero-idp-select.jsx
@@ -15,7 +15,7 @@ import { useApp } from "../../../../application";
 import { ConditionalWrapper } from "../../../../../libs";
 import disableOffline from "../../../../disable-offline";
 
-const Component = ({ identityProviders, css }) => {
+function Component({ identityProviders, css }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const history = useHistory();
@@ -78,7 +78,7 @@ const Component = ({ identityProviders, css }) => {
       </div>
     </>
   );
-};
+}
 
 Component.propTypes = {
   css: PropTypes.object,
diff --git a/app/javascript/components/login/components/idp-selection/container.jsx b/app/javascript/components/login/components/idp-selection/container.jsx
index 90a46630bf..8e9385beb5 100644
--- a/app/javascript/components/login/components/idp-selection/container.jsx
+++ b/app/javascript/components/login/components/idp-selection/container.jsx
@@ -12,7 +12,7 @@ import css from "./styles.css";
 import PrimeroIdpLink from "./components/primero-idp-link";
 import PrimeroIdpSelect from "./components/primero-idp-select";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -26,7 +26,7 @@ const Container = () => {
       <PrimeroIdpLink identityProviders={identityProviders} i18n={i18n} dispatch={dispatch} css={css} />
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/login/components/login-form/component.jsx b/app/javascript/components/login/components/login-form/component.jsx
index 2295f82cef..1fc2c98e1e 100644
--- a/app/javascript/components/login/components/login-form/component.jsx
+++ b/app/javascript/components/login/components/login-form/component.jsx
@@ -25,7 +25,7 @@ import { attemptLogin } from "./action-creators";
 import { selectAuthErrors } from "./selectors";
 import { form, validationSchema } from "./form";
 
-const Container = ({ modal = false }) => {
+function Container({ modal = false }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { demo, online } = useApp();
@@ -97,7 +97,7 @@ const Container = ({ modal = false }) => {
       {renderForgotPassword}
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/login/components/password-reset-dialog/component.jsx b/app/javascript/components/login/components/password-reset-dialog/component.jsx
index 6b3b389037..c9ce214fc5 100644
--- a/app/javascript/components/login/components/password-reset-dialog/component.jsx
+++ b/app/javascript/components/login/components/password-reset-dialog/component.jsx
@@ -10,7 +10,7 @@ import PasswordResetForm from "../password-reset-form";
 
 import { NAME, FORM_ID } from "./constants";
 
-const Component = ({ open = false, handleCancel, handleSuccess }) => {
+function Component({ open = false, handleCancel, handleSuccess }) {
   const i18n = useI18n();
   const saving = useMemoizedSelector(state => getSavingNewPasswordReset(state));
 
@@ -36,7 +36,7 @@ const Component = ({ open = false, handleCancel, handleSuccess }) => {
       <PasswordResetForm handleSubmit={handleSuccess} modal />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/login/components/password-reset-form/component.jsx b/app/javascript/components/login/components/password-reset-form/component.jsx
index 47ff833c24..0c09b4f043 100644
--- a/app/javascript/components/login/components/password-reset-form/component.jsx
+++ b/app/javascript/components/login/components/password-reset-form/component.jsx
@@ -16,7 +16,7 @@ import { getSavingNewPasswordReset } from "../../../pages/admin/users-form/selec
 import { form, validationSchema } from "./form";
 import { FORM_ID } from "./constants";
 
-const Component = ({ modal = false, handleSubmit }) => {
+function Component({ modal = false, handleSubmit }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -59,7 +59,7 @@ const Component = ({ modal = false, handleSubmit }) => {
       )}
     </>
   );
-};
+}
 
 Component.displayName = "PasswordResetRequest";
 
diff --git a/app/javascript/components/menu/component.jsx b/app/javascript/components/menu/component.jsx
index f6d3fda916..6ce2b8702e 100644
--- a/app/javascript/components/menu/component.jsx
+++ b/app/javascript/components/menu/component.jsx
@@ -9,7 +9,7 @@ import ActionButton, { ACTION_BUTTON_TYPES } from "../action-button";
 
 import { MenuItems } from "./components";
 
-const Component = ({ actions = [], disabledCondition = () => {}, showMenu = false }) => {
+function Component({ actions = [], disabledCondition = () => {}, showMenu = false }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = event => {
@@ -49,7 +49,7 @@ const Component = ({ actions = [], disabledCondition = () => {}, showMenu = fals
       </Menu>
     </>
   );
-};
+}
 
 Component.displayName = "Menu";
 
diff --git a/app/javascript/components/mobile-toolbar/component.jsx b/app/javascript/components/mobile-toolbar/component.jsx
index b1c5880f18..dbe1618732 100644
--- a/app/javascript/components/mobile-toolbar/component.jsx
+++ b/app/javascript/components/mobile-toolbar/component.jsx
@@ -13,7 +13,7 @@ import Jewel from "../jewel";
 
 import css from "./styles.css";
 
-const MobileToolbar = ({ openDrawer, hasUnsubmittedOfflineChanges = false }) => {
+function MobileToolbar({ openDrawer, hasUnsubmittedOfflineChanges = false }) {
   const { demo } = useApp();
   const i18n = useI18n();
 
@@ -41,7 +41,7 @@ const MobileToolbar = ({ openDrawer, hasUnsubmittedOfflineChanges = false }) =>
       </AppBar>
     </Box>
   );
-};
+}
 
 MobileToolbar.displayName = "MobileToolbar";
 
diff --git a/app/javascript/components/module-logo/component.jsx b/app/javascript/components/module-logo/component.jsx
index f0377f3067..56e6a62ec8 100644
--- a/app/javascript/components/module-logo/component.jsx
+++ b/app/javascript/components/module-logo/component.jsx
@@ -10,7 +10,7 @@ import css from "./styles.css";
 import { getLogo } from "./utils";
 import { getModuleLogoID } from "./selectors";
 
-const ModuleLogo = ({ moduleLogo, white, useModuleLogo }) => {
+function ModuleLogo({ moduleLogo, white, useModuleLogo }) {
   const tabletDisplay = useMediaQuery(theme => theme.breakpoints.only("md"));
 
   const moduleLogoID = useMemoizedSelector(state => getModuleLogoID(state));
@@ -30,7 +30,7 @@ const ModuleLogo = ({ moduleLogo, white, useModuleLogo }) => {
       />
     </div>
   );
-};
+}
 
 ModuleLogo.displayName = "ModuleLogo";
 
diff --git a/app/javascript/components/nav/component.jsx b/app/javascript/components/nav/component.jsx
index b1ff0928ae..4a02d27290 100644
--- a/app/javascript/components/nav/component.jsx
+++ b/app/javascript/components/nav/component.jsx
@@ -31,7 +31,7 @@ import { fetchAlerts } from "./action-creators";
 import { getUserId, selectUsername, selectAlerts } from "./selectors";
 import MenuEntry from "./components/menu-entry";
 
-const Nav = () => {
+function Nav() {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
   const dispatch = useDispatch();
   const i18n = useI18n();
@@ -183,7 +183,7 @@ const Nav = () => {
       </ActionDialog>
     </nav>
   );
-};
+}
 
 Nav.displayName = NAME;
 
diff --git a/app/javascript/components/nav/component.spec.js b/app/javascript/components/nav/component.spec.js
index d535f063e2..47c085cb27 100644
--- a/app/javascript/components/nav/component.spec.js
+++ b/app/javascript/components/nav/component.spec.js
@@ -7,7 +7,9 @@ import Nav from "./component";
 
 describe("<Nav />", () => {
   // eslint-disable-next-line react/display-name
-  const ProvidedNav = () => <Nav />;
+  function ProvidedNav() {
+    return <Nav />;
+  }
 
   const permissions = {
     cases: [ACTIONS.MANAGE],
diff --git a/app/javascript/components/nav/components/menu-entry/component.jsx b/app/javascript/components/nav/components/menu-entry/component.jsx
index 5549564e74..0f10e45a2c 100644
--- a/app/javascript/components/nav/components/menu-entry/component.jsx
+++ b/app/javascript/components/nav/components/menu-entry/component.jsx
@@ -19,7 +19,7 @@ import { setDialog } from "../../../action-dialog";
 import { LOGOUT_DIALOG, NAV_SETTINGS } from "../../constants";
 import { ROUTES } from "../../../../config";
 
-const Component = ({ closeDrawer, menuEntry, mobileDisplay, jewelCount, username }) => {
+function Component({ closeDrawer, menuEntry, mobileDisplay, jewelCount, username }) {
   const { disabledApplication, online, useContainedNavStyle } = useApp();
 
   const i18n = useI18n();
@@ -86,7 +86,7 @@ const Component = ({ closeDrawer, menuEntry, mobileDisplay, jewelCount, username
   }
 
   return renderNavAction;
-};
+}
 
 Component.propTypes = {
   closeDrawer: PropTypes.func.isRequired,
diff --git a/app/javascript/components/nepali-calendar-input/component.jsx b/app/javascript/components/nepali-calendar-input/component.jsx
index 258d769e4b..90a1ec05ce 100644
--- a/app/javascript/components/nepali-calendar-input/component.jsx
+++ b/app/javascript/components/nepali-calendar-input/component.jsx
@@ -11,7 +11,7 @@ import { BSToAD } from "bikram-sambat-js";
 import css from "./styles.css";
 import { convertToNeDate, parseDate } from "./utils";
 
-const Component = ({ helpText, label, dateProps }) => {
+function Component({ helpText, label, dateProps }) {
   const { name, onChange, value, error, disabled, placeholder, dateIncludeTime, InputProps } = dateProps;
   const inputValue = convertToNeDate(value);
 
@@ -90,7 +90,7 @@ const Component = ({ helpText, label, dateProps }) => {
       </FormControl>
     </div>
   );
-};
+}
 
 Component.propTypes = {
   dateProps: PropTypes.object,
diff --git a/app/javascript/components/network-indicator/component.jsx b/app/javascript/components/network-indicator/component.jsx
index c486f28abe..5afdf224dc 100644
--- a/app/javascript/components/network-indicator/component.jsx
+++ b/app/javascript/components/network-indicator/component.jsx
@@ -14,7 +14,7 @@ import NetworkStatus from "./components/network-status";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ mobile = false }) => {
+function Component({ mobile = false }) {
   const { online, useContainedNavStyle } = useApp();
   const i18n = useI18n();
 
@@ -38,7 +38,7 @@ const Component = ({ mobile = false }) => {
       <span className={css.status}>{online ? i18n.t("online") : i18n.t("offline")}</span>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/not-implemented/component.jsx b/app/javascript/components/not-implemented/component.jsx
index fc0cad65c5..bc5c77281a 100644
--- a/app/javascript/components/not-implemented/component.jsx
+++ b/app/javascript/components/not-implemented/component.jsx
@@ -2,13 +2,13 @@
 
 import PropTypes from "prop-types";
 
-const NotImplemented = ({ text }) => {
+function NotImplemented({ text }) {
   return (
     <div>
       <p>*** NOT IMPLEMENTED {text} ***</p>
     </div>
   );
-};
+}
 
 NotImplemented.displayName = "NotImplemented";
 
diff --git a/app/javascript/components/notifier/component.js b/app/javascript/components/notifier/component.js
index 65cbd2a745..f1e6af40a8 100644
--- a/app/javascript/components/notifier/component.js
+++ b/app/javascript/components/notifier/component.js
@@ -41,7 +41,7 @@ const buildMessage = ({ online, messageFromQueue, message, messageKey, messagePa
   return snackMessage;
 };
 
-const Notifier = () => {
+function Notifier() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { online } = useApp();
@@ -127,7 +127,7 @@ const Notifier = () => {
   }, [notifications, closeSnackbar, enqueueSnackbar, dispatch]);
 
   return null;
-};
+}
 
 Notifier.displayName = "Notifier";
 
diff --git a/app/javascript/components/notifier/components/snackbar-action/component.jsx b/app/javascript/components/notifier/components/snackbar-action/component.jsx
index f128d850f9..ba72a6148d 100644
--- a/app/javascript/components/notifier/components/snackbar-action/component.jsx
+++ b/app/javascript/components/notifier/components/snackbar-action/component.jsx
@@ -5,7 +5,7 @@ import { IconButton, Button } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { Link } from "react-router-dom";
 
-const Component = ({ action, actionLabel, actionUrl, closeSnackbar, snackKey, hideCloseIcon }) => {
+function Component({ action, actionLabel, actionUrl, closeSnackbar, snackKey, hideCloseIcon }) {
   const handleSnackClose = () => {
     closeSnackbar(snackKey);
   };
@@ -37,7 +37,7 @@ const Component = ({ action, actionLabel, actionUrl, closeSnackbar, snackKey, hi
       {showCloseIcon}
     </>
   );
-};
+}
 
 Component.displayName = "SnackbarAction";
 
diff --git a/app/javascript/components/page-navigation/component.jsx b/app/javascript/components/page-navigation/component.jsx
index dd8616d1a3..450d47bf43 100644
--- a/app/javascript/components/page-navigation/component.jsx
+++ b/app/javascript/components/page-navigation/component.jsx
@@ -9,7 +9,7 @@ import { ConditionalWrapper } from "../../libs";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ handleToggleNav, menuList = [], mobileDisplay = false, selected, toggleNav }) => {
+function Component({ handleToggleNav, menuList = [], mobileDisplay = false, selected, toggleNav }) {
   const drawerProps = {
     anchor: "left",
     open: toggleNav,
@@ -52,7 +52,7 @@ const Component = ({ handleToggleNav, menuList = [], mobileDisplay = false, sele
       </List>
     </ConditionalWrapper>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/page/component.jsx b/app/javascript/components/page/component.jsx
index 0da40c82d7..6020390620 100644
--- a/app/javascript/components/page/component.jsx
+++ b/app/javascript/components/page/component.jsx
@@ -8,7 +8,7 @@ import { useApp } from "../application/use-app";
 
 import css from "./styles.css";
 
-const Component = ({ children, twoCol, fullWidthMobile = false }) => {
+function Component({ children, twoCol, fullWidthMobile = false }) {
   const { demo } = useApp();
   const { mobileDisplay } = useThemeHelper();
   const contentClasses = clsx({ [css.root]: true, [css.demo]: demo });
@@ -25,7 +25,7 @@ const Component = ({ children, twoCol, fullWidthMobile = false }) => {
       <div className={contentContainer}>{children}</div>
     </div>
   );
-};
+}
 
 Component.displayName = "PageContainer";
 
diff --git a/app/javascript/components/page/components/page-content.jsx b/app/javascript/components/page/components/page-content.jsx
index 5f36b09c09..7499b29984 100644
--- a/app/javascript/components/page/components/page-content.jsx
+++ b/app/javascript/components/page/components/page-content.jsx
@@ -5,7 +5,7 @@ import clsx from "clsx";
 
 import css from "../styles.css";
 
-const PageContent = ({ children, flex = false, hasNav = false }) => {
+function PageContent({ children, flex = false, hasNav = false }) {
   const contentClasses = clsx(css.content, { [css.contentFlex]: flex, [css.hasNav]: hasNav });
 
   return (
@@ -13,7 +13,7 @@ const PageContent = ({ children, flex = false, hasNav = false }) => {
       {children}
     </div>
   );
-};
+}
 
 PageContent.propTypes = {
   children: PropTypes.node,
diff --git a/app/javascript/components/page/components/page-heading.jsx b/app/javascript/components/page/components/page-heading.jsx
index 227a22d3ca..cc3d6c2b38 100644
--- a/app/javascript/components/page/components/page-heading.jsx
+++ b/app/javascript/components/page/components/page-heading.jsx
@@ -9,7 +9,7 @@ import { useCallback, useState } from "react";
 import ActionButton, { ACTION_BUTTON_TYPES } from "../../action-button";
 import css from "../styles.css";
 
-const PageHeading = ({
+function PageHeading({
   title,
   prefixComponent,
   prefixAction,
@@ -19,7 +19,7 @@ const PageHeading = ({
   noPadding = false,
   controls,
   titleSecondary
-}) => {
+}) {
   const toolbarClasses = clsx(css.toolbar, { [css.noPadding]: noPadding });
   const appBarClasses = clsx(css.appBar, { [css.appBarBorder]: !noElevation });
   const titleClasses = clsx(css.title, { [css.titleWithSecondary]: titleSecondary });
@@ -77,7 +77,7 @@ const PageHeading = ({
       )}
     </AppBar>
   );
-};
+}
 
 PageHeading.displayName = "PageHeading";
 
diff --git a/app/javascript/components/pages/account/container.jsx b/app/javascript/components/pages/account/container.jsx
index 558bf00f1d..c86cb3d812 100644
--- a/app/javascript/components/pages/account/container.jsx
+++ b/app/javascript/components/pages/account/container.jsx
@@ -32,7 +32,7 @@ import { clearCurrentUser, fetchCurrentUser, updateUserAccount } from "./action-
 import { FORM_ID, NAME } from "./constants";
 import NAMESPACE from "./namespace";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
 
   const i18n = useI18n();
@@ -164,7 +164,7 @@ const Container = ({ mode }) => {
       </PageContainer>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/admin-nav-item.jsx b/app/javascript/components/pages/admin/admin-nav-item.jsx
index e7c60aa8e4..fc029ccc83 100644
--- a/app/javascript/components/pages/admin/admin-nav-item.jsx
+++ b/app/javascript/components/pages/admin/admin-nav-item.jsx
@@ -12,7 +12,7 @@ import Jewel from "../../jewel";
 
 import css from "./styles.css";
 
-const AdminNavItem = ({ item, isParent = false, open, handleClick, nestedClass, renderJewel }) => {
+function AdminNavItem({ item, isParent = false, open, handleClick, nestedClass, renderJewel }) {
   const i18n = useI18n();
   const { disabledApplication } = useApp();
 
@@ -45,7 +45,7 @@ const AdminNavItem = ({ item, isParent = false, open, handleClick, nestedClass,
       {jewel}
     </ListItem>
   );
-};
+}
 
 AdminNavItem.displayName = "AdminNavItem";
 
diff --git a/app/javascript/components/pages/admin/admin-nav.jsx b/app/javascript/components/pages/admin/admin-nav.jsx
index fb887b7b4b..05bf537132 100644
--- a/app/javascript/components/pages/admin/admin-nav.jsx
+++ b/app/javascript/components/pages/admin/admin-nav.jsx
@@ -16,7 +16,7 @@ import css from "./styles.css";
 import AdminNavItem from "./admin-nav-item";
 import { getAdminResources } from "./utils";
 
-const AdminNav = () => {
+function AdminNav() {
   const i18n = useI18n();
 
   const userPermissions = useMemoizedSelector(state => getPermissions(state), isEqual);
@@ -81,7 +81,7 @@ const AdminNav = () => {
       <List component="nav">{renderNavItems}</List>
     </>
   );
-};
+}
 
 AdminNav.displayName = "AdminNav";
 
diff --git a/app/javascript/components/pages/admin/agencies-form/container.jsx b/app/javascript/components/pages/admin/agencies-form/container.jsx
index 817b27617e..d909502bd0 100644
--- a/app/javascript/components/pages/admin/agencies-form/container.jsx
+++ b/app/javascript/components/pages/admin/agencies-form/container.jsx
@@ -28,7 +28,7 @@ import { form, validations } from "./form";
 import { fetchAgency, clearSelectedAgency, saveAgency } from "./action-creators";
 import { getAgency, getServerErrors, getSavingRecord } from "./selectors";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -149,7 +149,7 @@ const Container = ({ mode }) => {
       </PageContent>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/agencies-list/container.jsx b/app/javascript/components/pages/admin/agencies-list/container.jsx
index 60f2b851f4..308d3dc846 100644
--- a/app/javascript/components/pages/admin/agencies-list/container.jsx
+++ b/app/javascript/components/pages/admin/agencies-list/container.jsx
@@ -27,7 +27,7 @@ import { fetchAgencies, setAgenciesFilter } from "./action-creators";
 import { NAME, DISABLED } from "./constants";
 import NAMESPACE from "./namespace";
 
-const Container = () => {
+function Container() {
   const recordType = RESOURCES.agencies;
 
   const i18n = useI18n();
@@ -109,7 +109,7 @@ const Container = () => {
       </PageContent>
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/audit-logs/container.jsx b/app/javascript/components/pages/admin/audit-logs/container.jsx
index 9d2454d064..3fd9309705 100644
--- a/app/javascript/components/pages/admin/audit-logs/container.jsx
+++ b/app/javascript/components/pages/admin/audit-logs/container.jsx
@@ -22,7 +22,7 @@ import { fetchAuditLogs, fetchPerformedBy, setAuditLogsFilters } from "./action-
 import { getFilterUsers } from "./selectors";
 import { buildAuditLogsQuery, getFilters } from "./utils";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const recordType = ["admin", AUDIT_LOG];
@@ -136,7 +136,7 @@ const Container = () => {
       </PageContent>
     </Permission>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/code-of-conduct/component.jsx b/app/javascript/components/pages/admin/code-of-conduct/component.jsx
index bdf2a490e3..0d7b5a7487 100644
--- a/app/javascript/components/pages/admin/code-of-conduct/component.jsx
+++ b/app/javascript/components/pages/admin/code-of-conduct/component.jsx
@@ -22,7 +22,7 @@ import { form, validations } from "./form";
 import { getCodeOfConduct, getLoadingCodeOfConduct } from "./selectors";
 import { fetchCodeOfConduct, saveCodeOfConduct } from "./action-creators";
 
-const Component = ({ mode }) => {
+function Component({ mode }) {
   const formMode = whichFormMode(mode);
 
   const i18n = useI18n();
@@ -97,7 +97,7 @@ const Component = ({ mode }) => {
       </LoadingIndicator>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/configurations-form/container.jsx b/app/javascript/components/pages/admin/configurations-form/container.jsx
index 6c278e94cf..ee6336bec8 100644
--- a/app/javascript/components/pages/admin/configurations-form/container.jsx
+++ b/app/javascript/components/pages/admin/configurations-form/container.jsx
@@ -40,7 +40,7 @@ import {
 import { buildErrorMessages } from "./utils";
 import css from "./styles.css";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
 
   const isEditOrShow = formMode.isEdit || formMode.isShow;
@@ -226,7 +226,7 @@ const Container = ({ mode }) => {
       </PageContent>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/configurations-list/container.jsx b/app/javascript/components/pages/admin/configurations-list/container.jsx
index cd7d0f218d..0eca6afec5 100644
--- a/app/javascript/components/pages/admin/configurations-list/container.jsx
+++ b/app/javascript/components/pages/admin/configurations-list/container.jsx
@@ -19,7 +19,7 @@ import { NAME } from "./constants";
 import { getColumns } from "./utils";
 import { fetchConfigurations } from "./action-creators";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const recordType = ["admin", NAMESPACE];
 
@@ -82,7 +82,7 @@ const Container = () => {
       </PageContent>
     </Permission>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/contact-information/component.jsx b/app/javascript/components/pages/admin/contact-information/component.jsx
index 34e49a1348..9552953e04 100644
--- a/app/javascript/components/pages/admin/contact-information/component.jsx
+++ b/app/javascript/components/pages/admin/contact-information/component.jsx
@@ -21,7 +21,7 @@ import { form } from "./form";
 import { selectContactInformation, selectSavingContactInformation } from "./selectors";
 import { saveContactInformation } from "./action-creators";
 
-const Component = ({ mode }) => {
+function Component({ mode }) {
   const formMode = whichFormMode(mode);
 
   const i18n = useI18n();
@@ -90,7 +90,7 @@ const Component = ({ mode }) => {
       </LoadingIndicator>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/container.jsx b/app/javascript/components/pages/admin/container.jsx
index 82b3885f5c..6c5721873c 100644
--- a/app/javascript/components/pages/admin/container.jsx
+++ b/app/javascript/components/pages/admin/container.jsx
@@ -8,7 +8,7 @@ import PageContainer from "../../page";
 import AdminNav from "./admin-nav";
 import css from "./styles.css";
 
-const Container = ({ routes }) => {
+function Container({ routes }) {
   return (
     <PageContainer>
       <div className={css.container}>
@@ -21,7 +21,7 @@ const Container = ({ routes }) => {
       </div>
     </PageContainer>
   );
-};
+}
 
 Container.displayName = "Admin";
 
diff --git a/app/javascript/components/pages/admin/form-builder/component.jsx b/app/javascript/components/pages/admin/form-builder/component.jsx
index d5e8fecddd..9c554e1b64 100644
--- a/app/javascript/components/pages/admin/form-builder/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/component.jsx
@@ -42,7 +42,7 @@ import {
 import { calculateFormParams, conditionsToFieldArray, convertToFieldsObject, getSubformErrorMessages } from "./utils";
 import css from "./styles.css";
 
-const Component = ({ mode }) => {
+function Component({ mode }) {
   const { id } = useParams();
   const formMode = whichFormMode(mode);
   const dispatch = useDispatch();
@@ -259,7 +259,7 @@ const Component = ({ mode }) => {
       </LoadingIndicator>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/action-buttons/component.jsx b/app/javascript/components/pages/admin/form-builder/components/action-buttons/component.jsx
index 70beeb4a52..c6a3d59764 100644
--- a/app/javascript/components/pages/admin/form-builder/components/action-buttons/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/action-buttons/component.jsx
@@ -11,7 +11,7 @@ import { useMemoizedSelector } from "../../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ formMode, handleSubmit, handleCancel, limitedProductionSite }) => {
+function Component({ formMode, handleSubmit, handleCancel, limitedProductionSite }) {
   const i18n = useI18n();
 
   const saving = useMemoizedSelector(state => getSavingRecord(state));
@@ -36,7 +36,7 @@ const Component = ({ formMode, handleSubmit, handleCancel, limitedProductionSite
   );
 
   return saveButton;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/clear-buttons/component.jsx b/app/javascript/components/pages/admin/form-builder/components/clear-buttons/component.jsx
index b6f990d40d..5a6746b0a5 100644
--- a/app/javascript/components/pages/admin/form-builder/components/clear-buttons/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/clear-buttons/component.jsx
@@ -12,7 +12,7 @@ import { useApp } from "../../../../../application";
 import { NAME, GROUP_BY, SORT_BY } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ setValue, subformField, subformSortBy, subformGroupBy }) => {
+function Component({ setValue, subformField, subformSortBy, subformGroupBy }) {
   const { limitedProductionSite } = useApp();
   const fieldName = subformField.get("name");
 
@@ -44,7 +44,7 @@ const Component = ({ setValue, subformField, subformSortBy, subformGroupBy }) =>
       <div className={css.fieldColumn}>{renderClearButton(GROUP_BY, onClearGroupBy)}</div>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/custom-field-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/custom-field-dialog/component.jsx
index 8b2d105437..b03bb1536d 100644
--- a/app/javascript/components/pages/admin/form-builder/components/custom-field-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/custom-field-dialog/component.jsx
@@ -24,7 +24,7 @@ import { useApp } from "../../../../../application";
 import css from "./styles.css";
 import { NAME, CUSTOM_FIELD_DIALOG } from "./constants";
 
-const Component = ({ getValues }) => {
+function Component({ getValues }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -134,7 +134,7 @@ const Component = ({ getValues }) => {
       <CustomFieldSelectorDialog key="custom-field-selector-dialog" isSubform={isSelectedSubform} />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/custom-field-selector-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/custom-field-selector-dialog/component.jsx
index 439e0e8334..f74fa2c579 100644
--- a/app/javascript/components/pages/admin/form-builder/components/custom-field-selector-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/custom-field-selector-dialog/component.jsx
@@ -58,7 +58,7 @@ const fields = [
   [SUBFORM_SECTION, SubformField]
 ];
 
-const Component = ({ isSubform }) => {
+function Component({ isSubform }) {
   const [selectedItem, setSelectedItem] = useState("");
   const dispatch = useDispatch();
   const i18n = useI18n();
@@ -190,7 +190,7 @@ const Component = ({ isSubform }) => {
       </ActionDialog>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/component.jsx
index 2dafb50b14..1558248991 100644
--- a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/component.jsx
@@ -30,7 +30,7 @@ import { FieldsTable } from "./components";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ parentForm, primeroModule }) => {
+function Component({ parentForm, primeroModule }) {
   const dispatch = useDispatch();
   const i18n = useI18n();
   const { control, register } = useForm();
@@ -141,7 +141,7 @@ const Component = ({ parentForm, primeroModule }) => {
       </form>
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/fields-table/component.jsx b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/fields-table/component.jsx
index d6fe5cd8bb..ac22928f74 100644
--- a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/fields-table/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/fields-table/component.jsx
@@ -18,7 +18,7 @@ import useThemeHelpers from "../../../../../../../../libs/use-theme-helpers";
 import fieldsTableTheme from "./theme";
 import { COLUMN_HEADERS, NAME } from "./constants";
 
-const Component = ({ addField, fieldQuery, parentForm, primeroModule, removeField, selectedFields = [] }) => {
+function Component({ addField, fieldQuery, parentForm, primeroModule, removeField, selectedFields = [] }) {
   const i18n = useI18n();
   const { theme } = useThemeHelpers({ overrides: fieldsTableTheme });
 
@@ -96,7 +96,7 @@ const Component = ({ addField, fieldQuery, parentForm, primeroModule, removeFiel
       <MUIDataTable {...tableOptions} />
     </ThemeProvider>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/selection-column/component.jsx b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/selection-column/component.jsx
index 265f603fd5..0664d1a8da 100644
--- a/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/selection-column/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/existing-field-dialog/components/selection-column/component.jsx
@@ -7,7 +7,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
 
 import { NAME } from "./constants";
 
-const Component = ({ addField, field, removeField, selected = false }) => {
+function Component({ addField, field, removeField, selected = false }) {
   const onAdd = () => {
     addField(field);
   };
@@ -25,7 +25,7 @@ const Component = ({ addField, field, removeField, selected = false }) => {
       <AddIcon />
     </IconButton>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/field-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/field-dialog/component.jsx
index c3b7e97adc..c4f0a4d769 100644
--- a/app/javascript/components/pages/admin/form-builder/components/field-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/field-dialog/component.jsx
@@ -60,7 +60,7 @@ import {
 } from "./utils";
 import { NAME, ADMIN_FIELDS_DIALOG, FIELD_FORM, RESET_OPTIONS, SKIP_LOGIC_FIELD } from "./constants";
 
-const Component = ({ formId, mode, onClose, onSuccess, parentForm, primeroModule, recordType }) => {
+function Component({ formId, mode, onClose, onSuccess, parentForm, primeroModule, recordType }) {
   const formMode = whichFormMode(mode);
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -412,7 +412,7 @@ const Component = ({ formId, mode, onClose, onSuccess, parentForm, primeroModule
       </ActionDialog>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.jsx b/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.jsx
index d714cd5dff..fbb6ae4524 100644
--- a/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.jsx
@@ -31,7 +31,7 @@ import FieldListName from "../field-list-name";
 
 import { NAME, SUBFORM_GROUP_BY, SUBFORM_SORT_BY } from "./constants";
 
-const Component = ({ field, formMethods, index, subformField, subformSortBy, subformGroupBy }) => {
+function Component({ field, formMethods, index, subformField, subformSortBy, subformGroupBy }) {
   const dispatch = useDispatch();
   const i18n = useI18n();
   const { limitedProductionSite } = useApp();
@@ -141,7 +141,7 @@ const Component = ({ field, formMethods, index, subformField, subformSortBy, sub
       )}
     </Draggable>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.spec.js b/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.spec.js
index d03688a6fc..47e6d907c5 100644
--- a/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.spec.js
+++ b/app/javascript/components/pages/admin/form-builder/components/field-list-item/component.spec.js
@@ -12,25 +12,27 @@ describe("<FieldListItem />", () => {
   describe("when the field is editable", () => {
     beforeEach(() => {
       // eslint-disable-next-line react/display-name, react/prop-types
-      const Component = ({ formMethods }) => (
-        <DragDropContext>
-          <Droppable droppableId="droppable" type="field">
-            {() => (
-              <FieldListItem
-                field={fromJS({
-                  name: "field_1",
-                  editable: true,
-                  display_name: { en: "Field 1" },
-                  type: TEXT_FIELD
-                })}
-                getValues={() => ({ field_1: true })}
-                index={0}
-                formMethods={formMethods}
-              />
-            )}
-          </Droppable>
-        </DragDropContext>
-      );
+      function Component({ formMethods }) {
+        return (
+          <DragDropContext>
+            <Droppable droppableId="droppable" type="field">
+              {() => (
+                <FieldListItem
+                  field={fromJS({
+                    name: "field_1",
+                    editable: true,
+                    display_name: { en: "Field 1" },
+                    type: TEXT_FIELD
+                  })}
+                  getValues={() => ({ field_1: true })}
+                  index={0}
+                  formMethods={formMethods}
+                />
+              )}
+            </Droppable>
+          </DragDropContext>
+        );
+      }
 
       mountedFormComponent(<Component />);
     });
@@ -55,26 +57,28 @@ describe("<FieldListItem />", () => {
   describe("when the field is not editable", () => {
     beforeEach(() => {
       // eslint-disable-next-line react/display-name, react/no-multi-comp, react/prop-types
-      const Component = ({ formMethods }) => (
-        <DragDropContext>
-          <Droppable droppableId="droppable" type="field">
-            {() => (
-              <FieldListItem
-                field={fromJS({
-                  name: "field_1",
-                  editable: false,
-                  display_name: { en: "Field 1" },
-                  multi_select: true,
-                  type: SELECT_FIELD
-                })}
-                getValues={() => ({ field_1: true })}
-                index={0}
-                formMethods={formMethods}
-              />
-            )}
-          </Droppable>
-        </DragDropContext>
-      );
+      function Component({ formMethods }) {
+        return (
+          <DragDropContext>
+            <Droppable droppableId="droppable" type="field">
+              {() => (
+                <FieldListItem
+                  field={fromJS({
+                    name: "field_1",
+                    editable: false,
+                    display_name: { en: "Field 1" },
+                    multi_select: true,
+                    type: SELECT_FIELD
+                  })}
+                  getValues={() => ({ field_1: true })}
+                  index={0}
+                  formMethods={formMethods}
+                />
+              )}
+            </Droppable>
+          </DragDropContext>
+        );
+      }
 
       mountedFormComponent(<Component />);
     });
diff --git a/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/component.jsx
index 65166fb177..8cb0f16664 100644
--- a/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/component.jsx
@@ -22,7 +22,7 @@ import { TranslatableOptions } from "./components";
 import { translationsFieldForm, validationSchema } from "./forms";
 import { NAME, FIELD_TRANSLATIONS_FORM } from "./constants";
 
-const Component = ({ currentValues, field, isNested = false, mode, onClose, open = false, onSuccess }) => {
+function Component({ currentValues, field, isNested = false, mode, onClose, open = false, onSuccess }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const formMode = whichFormMode(mode);
@@ -181,7 +181,7 @@ const Component = ({ currentValues, field, isNested = false, mode, onClose, open
       </form>
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/components/translatable-options/component.jsx b/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/components/translatable-options/component.jsx
index 53d14a2901..6d5246e8c8 100644
--- a/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/components/translatable-options/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/field-translations-dialog/components/translatable-options/component.jsx
@@ -14,7 +14,7 @@ import { LOCALIZABLE_OPTIONS_FIELD_NAME } from "../../../field-dialog/constants"
 
 import { NAME } from "./constants";
 
-const Component = ({ field, selectedLocaleId, formMode, formMethods }) => {
+function Component({ field, selectedLocaleId, formMode, formMethods }) {
   const i18n = useI18n();
   const locales = i18n.applicationLocales.filter(locale => locale.id !== LOCALE_KEYS.en);
 
@@ -82,7 +82,7 @@ const Component = ({ field, selectedLocaleId, formMode, formMethods }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/fields-list/component.jsx b/app/javascript/components/pages/admin/form-builder/components/fields-list/component.jsx
index daeb84d4fd..c8e2f4f8b9 100644
--- a/app/javascript/components/pages/admin/form-builder/components/fields-list/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/fields-list/component.jsx
@@ -19,7 +19,7 @@ import FieldListHeaders from "../field-list-headers";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ formMethods, subformField, subformSortBy, subformGroupBy }) => {
+function Component({ formMethods, subformField, subformSortBy, subformGroupBy }) {
   const dispatch = useDispatch();
   const isNested = Boolean(subformField?.size || subformField?.toSeq()?.size);
 
@@ -128,7 +128,7 @@ const Component = ({ formMethods, subformField, subformSortBy, subformGroupBy })
       </DragDropContext>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/fields-tab/component.jsx b/app/javascript/components/pages/admin/form-builder/components/fields-tab/component.jsx
index 9aca69a835..32e935592c 100644
--- a/app/javascript/components/pages/admin/form-builder/components/fields-tab/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/fields-tab/component.jsx
@@ -18,7 +18,7 @@ import { MODULES_FIELD, RECORD_TYPE_FIELD } from "../../constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ mode, index, tab, formMethods }) => {
+function Component({ mode, index, tab, formMethods }) {
   const { id } = useParams();
   const { limitedProductionSite } = useApp();
 
@@ -71,7 +71,7 @@ const Component = ({ mode, index, tab, formMethods }) => {
       />
     </TabPanel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/form-translations-dialog/component.jsx b/app/javascript/components/pages/admin/form-builder/components/form-translations-dialog/component.jsx
index 5ce67e03be..84b013ed43 100644
--- a/app/javascript/components/pages/admin/form-builder/components/form-translations-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/form-translations-dialog/component.jsx
@@ -13,7 +13,7 @@ import { useApp } from "../../../../../application";
 import { FORM_ID, NAME } from "./constants";
 import { translationsForm, validationSchema } from "./forms";
 
-const Component = ({ getValues, mode, onClose, onSuccess }) => {
+function Component({ getValues, mode, onClose, onSuccess }) {
   const i18n = useI18n();
   const validations = validationSchema(i18n);
   const currentValues = getValues({ nest: true });
@@ -82,7 +82,7 @@ const Component = ({ getValues, mode, onClose, onSuccess }) => {
       />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/settings-tab/component.jsx b/app/javascript/components/pages/admin/form-builder/components/settings-tab/component.jsx
index d3d4d03a1a..d8509cd008 100644
--- a/app/javascript/components/pages/admin/form-builder/components/settings-tab/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/settings-tab/component.jsx
@@ -20,7 +20,7 @@ import { MODULES_FIELD, RECORD_TYPE_FIELD, SKIP_LOGIC_FIELD } from "../../consta
 
 import { NAME } from "./constants";
 
-const Component = ({ index, mode, tab, formMethods, limitedProductionSite }) => {
+function Component({ index, mode, tab, formMethods, limitedProductionSite }) {
   const dispatch = useDispatch();
   const formMode = whichFormMode(mode);
 
@@ -91,7 +91,7 @@ const Component = ({ index, mode, tab, formMethods, limitedProductionSite }) =>
       <FormTranslationsDialog mode={mode} getValues={getFormValues} onSuccess={onUpdateTranslation} reset={formReset} />
     </TabPanel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/subform-fields-list/component.jsx b/app/javascript/components/pages/admin/form-builder/components/subform-fields-list/component.jsx
index f4519eff8b..7f5a4e1890 100644
--- a/app/javascript/components/pages/admin/form-builder/components/subform-fields-list/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/subform-fields-list/component.jsx
@@ -10,7 +10,7 @@ import css from "../field-dialog/styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ formMethods, subformField, subformSortBy, subformGroupBy }) => {
+function Component({ formMethods, subformField, subformSortBy, subformGroupBy }) {
   const i18n = useI18n();
   const { getValues } = formMethods;
 
@@ -30,7 +30,7 @@ const Component = ({ formMethods, subformField, subformSortBy, subformGroupBy })
       />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/tab-panel/component.jsx b/app/javascript/components/pages/admin/form-builder/components/tab-panel/component.jsx
index 40f9a615be..deb7f243d4 100644
--- a/app/javascript/components/pages/admin/form-builder/components/tab-panel/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/tab-panel/component.jsx
@@ -7,7 +7,7 @@ import clsx from "clsx";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const TabPanel = ({ tab, index, children }) => {
+function TabPanel({ tab, index, children }) {
   const className = clsx(css.hideTab, css.tabContainer, {
     [css.showTab]: tab === index
   });
@@ -17,7 +17,7 @@ const TabPanel = ({ tab, index, children }) => {
       {children}
     </Paper>
   );
-};
+}
 
 TabPanel.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/translations-form/component.jsx b/app/javascript/components/pages/admin/form-builder/components/translations-form/component.jsx
index e5973a9037..745dc591ed 100644
--- a/app/javascript/components/pages/admin/form-builder/components/translations-form/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/translations-form/component.jsx
@@ -17,7 +17,7 @@ import { FieldTranslationRow } from "./components";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ mode, formMethods }) => {
+function Component({ mode, formMethods }) {
   const i18n = useI18n();
   const locales = localesToRender(i18n);
   const formMode = whichFormMode(mode);
@@ -183,7 +183,7 @@ const Component = ({ mode, formMethods }) => {
       </Grid>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/translations-form/components/field-translation-row/component.jsx b/app/javascript/components/pages/admin/form-builder/components/translations-form/components/field-translation-row/component.jsx
index 2f18e66abb..1358b56d0a 100644
--- a/app/javascript/components/pages/admin/form-builder/components/translations-form/components/field-translation-row/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/translations-form/components/field-translation-row/component.jsx
@@ -17,7 +17,7 @@ import { useApp } from "../../../../../../../application";
 
 import { NAME } from "./constants";
 
-const Component = ({ field, selectedLocaleId, formMethods, formMode }) => {
+function Component({ field, selectedLocaleId, formMethods, formMode }) {
   const i18n = useI18n();
   const { limitedProductionSite } = useApp();
   const locales = localesToRender(i18n);
@@ -85,7 +85,7 @@ const Component = ({ field, selectedLocaleId, formMethods, formMode }) => {
       </Grid>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/translations-note/component.jsx b/app/javascript/components/pages/admin/form-builder/components/translations-note/component.jsx
index e3c7052f6d..3ebd9c23c5 100644
--- a/app/javascript/components/pages/admin/form-builder/components/translations-note/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/translations-note/component.jsx
@@ -10,7 +10,7 @@ import useOptions from "../../../../../form/use-options";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ moduleId, parentForm }) => {
+function Component({ moduleId, parentForm }) {
   const i18n = useI18n();
 
   const formGroupLookup = useOptions({ source: buildFormGroupUniqueId(moduleId, parentForm), fullLookup: true });
@@ -23,7 +23,7 @@ const Component = ({ moduleId, parentForm }) => {
       </Link>
     </p>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/form-builder/components/translations-tab/component.jsx b/app/javascript/components/pages/admin/form-builder/components/translations-tab/component.jsx
index a84343dd51..5e2be5d18f 100644
--- a/app/javascript/components/pages/admin/form-builder/components/translations-tab/component.jsx
+++ b/app/javascript/components/pages/admin/form-builder/components/translations-tab/component.jsx
@@ -19,7 +19,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ index, mode, moduleId, parentForm, selectedField, tab, formMethods }) => {
+function Component({ index, mode, moduleId, parentForm, selectedField, tab, formMethods }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { dialogOpen } = useDialog(FieldTranslationsDialogName);
@@ -89,7 +89,7 @@ const Component = ({ index, mode, moduleId, parentForm, selectedField, tab, form
       </div>
     </TabPanel>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/forms-list/component.jsx b/app/javascript/components/pages/admin/forms-list/component.jsx
index be97e850c8..19677c351c 100644
--- a/app/javascript/components/pages/admin/forms-list/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/component.jsx
@@ -38,7 +38,7 @@ import { getFormGroups, getListStyle } from "./utils";
 import { NAME, FORM_GROUP_PREFIX, ORDER_TYPE } from "./constants";
 import css from "./styles.css";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const { limitedProductionSite } = useApp();
   const { pathname } = useLocation();
@@ -201,7 +201,7 @@ const Component = () => {
       </PageContent>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/drag-indicator/component.jsx b/app/javascript/components/pages/admin/forms-list/components/drag-indicator/component.jsx
index 707783b514..d9a65853fd 100644
--- a/app/javascript/components/pages/admin/forms-list/components/drag-indicator/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/drag-indicator/component.jsx
@@ -6,7 +6,7 @@ import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 
 import css from "../../styles.css";
 
-const Component = ({ isDragDisabled = false, ...props }) => {
+function Component({ isDragDisabled = false, ...props }) {
   const classes = isDragDisabled ? { classes: { root: css.dragIndicator } } : {};
 
   return (
@@ -14,7 +14,7 @@ const Component = ({ isDragDisabled = false, ...props }) => {
       <DragIndicatorIcon />
     </Icon>
   );
-};
+}
 
 Component.displayName = "DragIndicator";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/filter-input/component.jsx b/app/javascript/components/pages/admin/forms-list/components/filter-input/component.jsx
index f53102ef2e..dff2146784 100644
--- a/app/javascript/components/pages/admin/forms-list/components/filter-input/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/filter-input/component.jsx
@@ -6,7 +6,7 @@ import ToggleButtonGroup from "@mui/lab/ToggleButtonGroup";
 
 import css from "../../styles.css";
 
-const Component = ({ handleSetFilterValue, options = [], name, filterValues = {}, id: filterID }) => {
+function Component({ handleSetFilterValue, options = [], name, filterValues = {}, id: filterID }) {
   const renderOptions = () =>
     options.map(option => {
       const { displayName, id } = option;
@@ -40,7 +40,7 @@ const Component = ({ handleSetFilterValue, options = [], name, filterValues = {}
       {renderOptions()}
     </ToggleButtonGroup>
   );
-};
+}
 
 Component.displayName = "FilterInput";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/filters-expansion-panel/component.jsx b/app/javascript/components/pages/admin/forms-list/components/filters-expansion-panel/component.jsx
index 8d26e21a8b..38539e1306 100644
--- a/app/javascript/components/pages/admin/forms-list/components/filters-expansion-panel/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/filters-expansion-panel/component.jsx
@@ -6,7 +6,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import FilterInput from "../filter-input";
 
-const Component = ({ name, handleSetFilterValue, options = [], id, filterValues = {} }) => {
+function Component({ name, handleSetFilterValue, options = [], id, filterValues = {} }) {
   return (
     <Accordion elevation={3} defaultExpanded data-testid="accordion">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>{name}</AccordionSummary>
@@ -21,7 +21,7 @@ const Component = ({ name, handleSetFilterValue, options = [], id, filterValues
       </AccordionDetails>
     </Accordion>
   );
-};
+}
 
 Component.displayName = "FiltersExpansionPanel";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-exporter/component.jsx b/app/javascript/components/pages/admin/forms-list/components/form-exporter/component.jsx
index 5137757ce2..ec73cc2cbc 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-exporter/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/form-exporter/component.jsx
@@ -16,7 +16,7 @@ import validations from "./validations";
 import { NAME, EXPORT_TYPES, EXPORTED_URL, FORM_ID } from "./constants";
 import { form } from "./form";
 
-const Component = ({ close, filters, i18n, open, pending, setPending }) => {
+function Component({ close, filters, i18n, open, pending, setPending }) {
   const dispatch = useDispatch();
   const { recordType, primeroModule } = filters;
   const dialogPending = typeof pending === "object" ? pending.get("pending") : pending;
@@ -68,7 +68,7 @@ const Component = ({ close, filters, i18n, open, pending, setPending }) => {
       />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-filters/component.jsx b/app/javascript/components/pages/admin/forms-list/components/form-filters/component.jsx
index 9efc9836c1..48d8275a81 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-filters/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/form-filters/component.jsx
@@ -10,7 +10,7 @@ import FiltersExpansionPanel from "../filters-expansion-panel";
 import ActionButton from "../../../../../action-button";
 import { ACTION_BUTTON_TYPES } from "../../../../../action-button/constants";
 
-const Component = ({ filterValues = {}, modules, handleSetFilterValue, handleClearValue, disabled = false }) => {
+function Component({ filterValues = {}, modules, handleSetFilterValue, handleClearValue, disabled = false }) {
   const i18n = useI18n();
 
   const filters = [
@@ -70,7 +70,7 @@ const Component = ({ filterValues = {}, modules, handleSetFilterValue, handleCle
       {renderExpansionPanels()}
     </div>
   );
-};
+}
 
 Component.displayName = "FormFilters";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-group/component.jsx b/app/javascript/components/pages/admin/forms-list/components/form-group/component.jsx
index 0f6327aca4..1f22edab0c 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-group/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/form-group/component.jsx
@@ -9,7 +9,7 @@ import css from "../../styles.css";
 import DragIndicator from "../drag-indicator";
 import { FORM_GROUP_PREFIX } from "../../constants";
 
-const Component = ({ name, id, index, children, isDragDisabled = false }) => {
+function Component({ name, id, index, children, isDragDisabled = false }) {
   return (
     <Draggable draggableId={`${FORM_GROUP_PREFIX}-${id}`} index={index} isDragDisabled={isDragDisabled}>
       {provided => (
@@ -28,7 +28,7 @@ const Component = ({ name, id, index, children, isDragDisabled = false }) => {
       )}
     </Draggable>
   );
-};
+}
 
 Component.displayName = "FormGroup";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-group/component.spec.js b/app/javascript/components/pages/admin/forms-list/components/form-group/component.spec.js
index b721464323..4de5fa778a 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-group/component.spec.js
+++ b/app/javascript/components/pages/admin/forms-list/components/form-group/component.spec.js
@@ -6,19 +6,21 @@ import { Typography } from "@mui/material";
 import FormGroup from "./component";
 
 describe("<FormsList />/components/<FormGroup />", () => {
-  const RenderFormGroup = () => (
-    <DragDropContext>
-      <Droppable droppableId="droppable" type="formGroup">
-        {provided => (
-          <div ref={provided.innerRef}>
-            <FormGroup id="group-1" index={0} name="Group 1">
-              <Typography>Some Content</Typography>
-            </FormGroup>
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  );
+  function RenderFormGroup() {
+    return (
+      <DragDropContext>
+        <Droppable droppableId="droppable" type="formGroup">
+          {provided => (
+            <div ref={provided.innerRef}>
+              <FormGroup id="group-1" index={0} name="Group 1">
+                <Typography>Some Content</Typography>
+              </FormGroup>
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
 
   RenderFormGroup.displayName = "RenderFormGroup";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-section/component.jsx b/app/javascript/components/pages/admin/forms-list/components/form-section/component.jsx
index 46872e8b8f..a881487ac8 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-section/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/form-section/component.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../../../../../i18n";
 import FormSectionList from "../form-section-list";
 import css from "../../styles.css";
 
-const Component = ({ group, collection, isDragDisabled = false }) => {
+function Component({ group, collection, isDragDisabled = false }) {
   const i18n = useI18n();
 
   const classes = clsx(css.row, css.header);
@@ -29,7 +29,7 @@ const Component = ({ group, collection, isDragDisabled = false }) => {
       )}
     </Droppable>
   );
-};
+}
 
 Component.displayName = "FormSection";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/form-section/component.spec.js b/app/javascript/components/pages/admin/forms-list/components/form-section/component.spec.js
index 1f62599b34..ead40fdc75 100644
--- a/app/javascript/components/pages/admin/forms-list/components/form-section/component.spec.js
+++ b/app/javascript/components/pages/admin/forms-list/components/form-section/component.spec.js
@@ -19,11 +19,13 @@ describe("<FormsList />/components/<FormSection />", () => {
       }
     ]);
 
-    const RenderFormSection = () => (
-      <DragDropContext>
-        <FormSection group={group} collection="form-1" />
-      </DragDropContext>
-    );
+    function RenderFormSection() {
+      return (
+        <DragDropContext>
+          <FormSection group={group} collection="form-1" />
+        </DragDropContext>
+      );
+    }
 
     RenderFormSection.displayName = "RenderFormSection";
     mountedComponent(<RenderFormSection />);
diff --git a/app/javascript/components/pages/admin/forms-list/components/reorder-actions/component.jsx b/app/javascript/components/pages/admin/forms-list/components/reorder-actions/component.jsx
index 44799bca5c..68bff387a7 100644
--- a/app/javascript/components/pages/admin/forms-list/components/reorder-actions/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/reorder-actions/component.jsx
@@ -17,7 +17,7 @@ import { getReorderIsLoading, getReorderErrors, getReorderPendings } from "../..
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ handleCancel, handleSuccess, open = false }) => {
+function Component({ handleCancel, handleSuccess, open = false }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -72,7 +72,7 @@ const Component = ({ handleCancel, handleSuccess, open = false }) => {
       </DialogActions>
     </Dialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/table-row/component.jsx b/app/javascript/components/pages/admin/forms-list/components/table-row/component.jsx
index a36c13c356..c2d0fd7f72 100644
--- a/app/javascript/components/pages/admin/forms-list/components/table-row/component.jsx
+++ b/app/javascript/components/pages/admin/forms-list/components/table-row/component.jsx
@@ -12,7 +12,7 @@ import css from "../../styles.css";
 import DragIndicator from "../drag-indicator";
 import LockedIcon from "../../../../../locked-icon";
 
-const Component = ({ name, modules, parentForm, uniqueID, id, index, editable, isDragDisabled = false }) => {
+function Component({ name, modules, parentForm, uniqueID, id, index, editable, isDragDisabled = false }) {
   const i18n = useI18n();
 
   const nameStyles = clsx({
@@ -41,7 +41,7 @@ const Component = ({ name, modules, parentForm, uniqueID, id, index, editable, i
       )}
     </Draggable>
   );
-};
+}
 
 Component.displayName = "TableRow";
 
diff --git a/app/javascript/components/pages/admin/forms-list/components/table-row/component.spec.js b/app/javascript/components/pages/admin/forms-list/components/table-row/component.spec.js
index c7099c3963..d7ad9f581f 100644
--- a/app/javascript/components/pages/admin/forms-list/components/table-row/component.spec.js
+++ b/app/javascript/components/pages/admin/forms-list/components/table-row/component.spec.js
@@ -22,17 +22,19 @@ describe("<FormsList />/components/<TableRow />", () => {
   };
 
   beforeEach(() => {
-    const RenderTableRow = () => (
-      <DragDropContext>
-        <Droppable droppableId="droppable" type="formSection">
-          {provided => (
-            <div ref={provided.innerRef}>
-              <TableRow {...props} />
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    );
+    function RenderTableRow() {
+      return (
+        <DragDropContext>
+          <Droppable droppableId="droppable" type="formSection">
+            {provided => (
+              <div ref={provided.innerRef}>
+                <TableRow {...props} />
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      );
+    }
 
     RenderTableRow.displayName = "RenderTableRow";
     mountedComponent(<RenderTableRow />);
diff --git a/app/javascript/components/pages/admin/locations-list/container.jsx b/app/javascript/components/pages/admin/locations-list/container.jsx
index 55c1b9855c..7997c1c038 100644
--- a/app/javascript/components/pages/admin/locations-list/container.jsx
+++ b/app/javascript/components/pages/admin/locations-list/container.jsx
@@ -30,7 +30,7 @@ import { fetchLocations, setLocationsFilter } from "./action-creators";
 import { ACTION_NAME, DISABLED, NAME, COLUMNS, LOCATION_TYPE_LOOKUP, LOCATIONS_DIALOG } from "./constants";
 import { getColumns, getFilters } from "./utils";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const [selectedRecords, setSelectedRecords] = useState({});
@@ -146,7 +146,7 @@ const Container = () => {
       </PageContent>
     </Permission>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/locations-list/disable-dialog/component.jsx b/app/javascript/components/pages/admin/locations-list/disable-dialog/component.jsx
index 77366a153d..44224b191a 100644
--- a/app/javascript/components/pages/admin/locations-list/disable-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/locations-list/disable-dialog/component.jsx
@@ -16,7 +16,7 @@ import { ACTION_NAME } from "../constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ filters, selectedRecords, setSelectedRecords, recordType }) => {
+function Component({ filters, selectedRecords, setSelectedRecords, recordType }) {
   const dispatch = useDispatch();
 
   const data = useMemoizedSelector(state => getRecords(state, recordType));
@@ -67,7 +67,7 @@ const Component = ({ filters, selectedRecords, setSelectedRecords, recordType })
       <p>{i18n.t(`location.${action}_text`)}</p>
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/locations-list/import-dialog/component.jsx b/app/javascript/components/pages/admin/locations-list/import-dialog/component.jsx
index 55a96d2769..4eb064c118 100644
--- a/app/javascript/components/pages/admin/locations-list/import-dialog/component.jsx
+++ b/app/javascript/components/pages/admin/locations-list/import-dialog/component.jsx
@@ -15,7 +15,7 @@ import { getImportErrors } from "./selectors";
 import { form } from "./form";
 import { NAME, FORM_ID } from "./constants";
 
-const Component = ({ close, i18n, open, pending }) => {
+function Component({ close, i18n, open, pending }) {
   const dispatch = useDispatch();
   const dialogPending = typeof pending === "object" ? pending.get("pending") : pending;
 
@@ -60,7 +60,7 @@ const Component = ({ close, i18n, open, pending }) => {
       <Form useCancelPrompt mode="new" formSections={form(i18n)} onSubmit={onSubmit} formID={FORM_ID} />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/lookups-form/components/draggable-row/component.jsx b/app/javascript/components/pages/admin/lookups-form/components/draggable-row/component.jsx
index 8c8454b087..2cbdc71d83 100644
--- a/app/javascript/components/pages/admin/lookups-form/components/draggable-row/component.jsx
+++ b/app/javascript/components/pages/admin/lookups-form/components/draggable-row/component.jsx
@@ -12,7 +12,7 @@ import { LOCALE_KEYS } from "../../../../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   firstLocaleOption,
   index,
   isDragDisabled,
@@ -22,7 +22,7 @@ const Component = ({
   uniqueId,
   formMode,
   formMethods
-}) => {
+}) {
   const renderTranslationValues = () => {
     return localesKeys.map(localeKey => {
       const name = `values.${localeKey}.${uniqueId}`;
@@ -73,7 +73,7 @@ const Component = ({
       }}
     </Draggable>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/lookups-form/components/form/component.jsx b/app/javascript/components/pages/admin/lookups-form/components/form/component.jsx
index f1609dab08..ec0643d992 100644
--- a/app/javascript/components/pages/admin/lookups-form/components/form/component.jsx
+++ b/app/javascript/components/pages/admin/lookups-form/components/form/component.jsx
@@ -33,7 +33,7 @@ import { LOCALE_KEYS, SAVE_METHODS } from "../../../../../../config";
 
 import { NAME, FORM_ID } from "./constants";
 
-const Component = ({ formMode, isLockedLookup, lookup }) => {
+function Component({ formMode, isLockedLookup, lookup }) {
   const { id } = useParams();
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -139,7 +139,7 @@ const Component = ({ formMode, isLockedLookup, lookup }) => {
       />
     </form>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/lookups-form/components/header-values/component.jsx b/app/javascript/components/pages/admin/lookups-form/components/header-values/component.jsx
index 9559696d15..16a504d51d 100644
--- a/app/javascript/components/pages/admin/lookups-form/components/header-values/component.jsx
+++ b/app/javascript/components/pages/admin/lookups-form/components/header-values/component.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../../../../../i18n";
 
 import { NAME } from "./constants";
 
-const Component = ({ hideTranslationColumn }) => {
+function Component({ hideTranslationColumn }) {
   const i18n = useI18n();
 
   const hide = hideTranslationColumn ? css.hideTranslationsFields : null;
@@ -22,7 +22,7 @@ const Component = ({ hideTranslationColumn }) => {
       <div className={css.dragIndicatorContainer}>{i18n.t("lookup.enabled_label")}</div>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/lookups-form/container.jsx b/app/javascript/components/pages/admin/lookups-form/container.jsx
index 7e76ad5d03..8081b78799 100644
--- a/app/javascript/components/pages/admin/lookups-form/container.jsx
+++ b/app/javascript/components/pages/admin/lookups-form/container.jsx
@@ -28,7 +28,7 @@ import { clearSelectedLookup, fetchLookup } from "./action-creators";
 import { LookupForm } from "./components";
 import { FORM_ID } from "./components/form/constants";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const i18n = useI18n();
   const { limitedProductionSite } = useApp();
   const dispatch = useDispatch();
@@ -118,7 +118,7 @@ const Container = ({ mode }) => {
       </LoadingIndicator>
     </Permission>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/lookups-list/component.jsx b/app/javascript/components/pages/admin/lookups-list/component.jsx
index e8046a55fe..4390148b94 100644
--- a/app/javascript/components/pages/admin/lookups-list/component.jsx
+++ b/app/javascript/components/pages/admin/lookups-list/component.jsx
@@ -23,7 +23,7 @@ import { fetchAdminLookups, setLookupsFilter } from "./action-creators";
 import css from "./styles.css";
 import { columns } from "./utils";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -76,7 +76,7 @@ const Component = () => {
       </PageContent>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/roles-form/container.jsx b/app/javascript/components/pages/admin/roles-form/container.jsx
index 744334804b..2a0103d00e 100644
--- a/app/javascript/components/pages/admin/roles-form/container.jsx
+++ b/app/javascript/components/pages/admin/roles-form/container.jsx
@@ -26,7 +26,7 @@ import { getRole, getCopiedRole } from "./selectors";
 import { NAME, FORM_ID } from "./constants";
 import RolesActions from "./roles-actions";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
   const isEditOrShow = formMode.get("isEdit") || formMode.get("isShow");
 
@@ -134,7 +134,7 @@ const Container = ({ mode }) => {
       </PageContent>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/roles-form/forms/action-buttons.jsx b/app/javascript/components/pages/admin/roles-form/forms/action-buttons.jsx
index 3d4ef5cc40..83250e7595 100644
--- a/app/javascript/components/pages/admin/roles-form/forms/action-buttons.jsx
+++ b/app/javascript/components/pages/admin/roles-form/forms/action-buttons.jsx
@@ -15,7 +15,7 @@ import ActionButton from "../../../../action-button";
 import { ACTION_BUTTON_TYPES } from "../../../../action-button/constants";
 import { useMemoizedSelector } from "../../../../../libs";
 
-const Component = ({ formMode, formID, handleCancel, limitedProductionSite }) => {
+function Component({ formMode, formID, handleCancel, limitedProductionSite }) {
   const i18n = useI18n();
   const { pathname } = useLocation();
 
@@ -54,7 +54,7 @@ const Component = ({ formMode, formID, handleCancel, limitedProductionSite }) =>
       {saveButton}
     </>
   );
-};
+}
 
 Component.displayName = ACTION_BUTTONS_NAME;
 
diff --git a/app/javascript/components/pages/admin/roles-form/roles-actions/component.jsx b/app/javascript/components/pages/admin/roles-form/roles-actions/component.jsx
index d8447bec56..01fce38772 100644
--- a/app/javascript/components/pages/admin/roles-form/roles-actions/component.jsx
+++ b/app/javascript/components/pages/admin/roles-form/roles-actions/component.jsx
@@ -11,7 +11,7 @@ import { ROUTES } from "../../../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ canCopyRole = false, initialValues }) => {
+function Component({ canCopyRole = false, initialValues }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -39,7 +39,7 @@ const Component = ({ canCopyRole = false, initialValues }) => {
       <Menu showMenu actions={actions} />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/roles-list/container.jsx b/app/javascript/components/pages/admin/roles-list/container.jsx
index cdcffa79fc..22760e9841 100644
--- a/app/javascript/components/pages/admin/roles-list/container.jsx
+++ b/app/javascript/components/pages/admin/roles-list/container.jsx
@@ -26,7 +26,7 @@ import { filterOnTableChange, getFilters, onSubmitFilters } from "../utils";
 import { fetchRoles, setRolesFilter } from "./action-creators";
 import { ADMIN_NAMESPACE, LIST_HEADERS, NAME } from "./constants";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { limitedProductionSite } = useApp();
@@ -100,7 +100,7 @@ const Container = () => {
       </PageContent>
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/user-groups-form/container.jsx b/app/javascript/components/pages/admin/user-groups-form/container.jsx
index d51bcf5dc0..1d6841752a 100644
--- a/app/javascript/components/pages/admin/user-groups-form/container.jsx
+++ b/app/javascript/components/pages/admin/user-groups-form/container.jsx
@@ -24,7 +24,7 @@ import { fetchUserGroup, clearSelectedUserGroup, saveUserGroup } from "./action-
 import { getUserGroup, getServerErrors, getSavingRecord } from "./selectors";
 import { NAME, FORM_ID } from "./constants";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
   const isEditOrShow = formMode.get("isEdit") || formMode.get("isShow");
 
@@ -117,7 +117,7 @@ const Container = ({ mode }) => {
       </PageContent>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/user-groups-list/container.jsx b/app/javascript/components/pages/admin/user-groups-list/container.jsx
index 8ad7b5e85c..7f6ba8a061 100644
--- a/app/javascript/components/pages/admin/user-groups-list/container.jsx
+++ b/app/javascript/components/pages/admin/user-groups-list/container.jsx
@@ -27,7 +27,7 @@ import { getUserGroupFilters } from "./utils";
 import { AGENCY_UNIQUE_IDS, NAME } from "./constants";
 import { fetchUserGroups, setUserGroupsFilter } from "./action-creators";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const canAddUserGroups = usePermissions(NAMESPACE, CREATE_RECORDS);
@@ -108,7 +108,7 @@ const Container = () => {
       </PageContent>
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/users-form/container.jsx b/app/javascript/components/pages/admin/users-form/container.jsx
index 3da826ce1d..b1fcadfd8a 100644
--- a/app/javascript/components/pages/admin/users-form/container.jsx
+++ b/app/javascript/components/pages/admin/users-form/container.jsx
@@ -45,7 +45,7 @@ import {
 import UserConfirmation from "./user-confirmation";
 import ChangePassword from "./change-password";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
 
   const i18n = useI18n();
@@ -290,7 +290,7 @@ const Container = ({ mode }) => {
       </PageContent>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = "UsersForm";
 
diff --git a/app/javascript/components/pages/admin/users-form/user-confirmation/component.jsx b/app/javascript/components/pages/admin/users-form/user-confirmation/component.jsx
index feb5ebc304..4f3d0e7dba 100644
--- a/app/javascript/components/pages/admin/users-form/user-confirmation/component.jsx
+++ b/app/javascript/components/pages/admin/users-form/user-confirmation/component.jsx
@@ -12,7 +12,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   close,
   dialogName,
   id,
@@ -24,7 +24,7 @@ const Component = ({
   userData,
   userName,
   identityOptions
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -88,7 +88,7 @@ const Component = ({
       {dialogContent}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/admin/users-list/container.jsx b/app/javascript/components/pages/admin/users-list/container.jsx
index ed631342d3..d2f542f932 100644
--- a/app/javascript/components/pages/admin/users-list/container.jsx
+++ b/app/javascript/components/pages/admin/users-list/container.jsx
@@ -31,7 +31,7 @@ import AlertMaxUser from "./components/alert-max-user";
 import CustomToolbar from "./components/custom-toolbar";
 import NewUserBtn from "./components/new-user-button";
 
-const Container = () => {
+function Container() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { maximumUsers, maximumUsersWarning } = useApp();
@@ -147,7 +147,7 @@ const Container = () => {
       </PageContent>
     </>
   );
-};
+}
 
 Container.displayName = "UsersList";
 
diff --git a/app/javascript/components/pages/dashboard/components/approvals/component.jsx b/app/javascript/components/pages/dashboard/components/approvals/component.jsx
index f074837882..7e98bce948 100644
--- a/app/javascript/components/pages/dashboard/components/approvals/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/approvals/component.jsx
@@ -32,7 +32,7 @@ import css from "../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
   const { approvalsLabels } = useApp();
 
@@ -162,7 +162,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/cases-by-social-worker/component.jsx b/app/javascript/components/pages/dashboard/components/cases-by-social-worker/component.jsx
index b873207a33..04c4cb67c2 100644
--- a/app/javascript/components/pages/dashboard/components/cases-by-social-worker/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/cases-by-social-worker/component.jsx
@@ -12,7 +12,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const data = useMemoizedSelector(state => getCasesBySocialWorker(state));
@@ -32,7 +32,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/cases-to-assign/component.jsx b/app/javascript/components/pages/dashboard/components/cases-to-assign/component.jsx
index 680dc7b665..4e40840d82 100644
--- a/app/javascript/components/pages/dashboard/components/cases-to-assign/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/cases-to-assign/component.jsx
@@ -14,7 +14,7 @@ import useOptions from "../../../../form/use-options";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
   const casesToAssign = useMemoizedSelector(state => getCasesToAssign(state));
   const options = useOptions({ source: LOOKUPS.risk_level });
@@ -34,7 +34,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/flags/component.jsx b/app/javascript/components/pages/dashboard/components/flags/component.jsx
index 31b07b126d..df824f2164 100644
--- a/app/javascript/components/pages/dashboard/components/flags/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/flags/component.jsx
@@ -16,7 +16,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const flags = useMemoizedSelector(state => getDashboardFlags(state));
@@ -47,7 +47,7 @@ const Component = ({ loadingIndicator }) => {
       </Permission>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/overdue-tasks/component.jsx b/app/javascript/components/pages/dashboard/components/overdue-tasks/component.jsx
index 77a59f471a..e95eb59a19 100644
--- a/app/javascript/components/pages/dashboard/components/overdue-tasks/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/overdue-tasks/component.jsx
@@ -17,7 +17,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const casesByTaskOverdueAssessment = useMemoizedSelector(state => getCasesByTaskOverdueAssessment(state));
@@ -63,7 +63,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/overview/component.jsx b/app/javascript/components/pages/dashboard/components/overview/component.jsx
index 4e63c554b2..22918fa9bf 100644
--- a/app/javascript/components/pages/dashboard/components/overview/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/overview/component.jsx
@@ -24,7 +24,7 @@ import css from "../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator, userPermissions }) => {
+function Component({ loadingIndicator, userPermissions }) {
   const i18n = useI18n();
 
   const casesByAssessmentLevel = useMemoizedSelector(state => getCasesByAssessmentLevel(state));
@@ -148,7 +148,7 @@ const Component = ({ loadingIndicator, userPermissions }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/perpetrator-armed-force-group-party-names/component.jsx b/app/javascript/components/pages/dashboard/components/perpetrator-armed-force-group-party-names/component.jsx
index ff787617ff..8ed9a80ce3 100644
--- a/app/javascript/components/pages/dashboard/components/perpetrator-armed-force-group-party-names/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/perpetrator-armed-force-group-party-names/component.jsx
@@ -14,7 +14,7 @@ import { INDICATOR_NAMES } from "../../constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const armedForceGroupOrOtherParty = useOptions({ source: LOOKUPS.armed_force_group_or_other_party });
@@ -43,7 +43,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/protection-concern/component.jsx b/app/javascript/components/pages/dashboard/components/protection-concern/component.jsx
index 8eae7dacd0..ae1ec13440 100644
--- a/app/javascript/components/pages/dashboard/components/protection-concern/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/protection-concern/component.jsx
@@ -13,7 +13,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const protectionConcerns = useMemoizedSelector(state => getProtectionConcerns(state));
@@ -36,7 +36,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/reporting-location/component.jsx b/app/javascript/components/pages/dashboard/components/reporting-location/component.jsx
index 295fc0b627..952e0c1b42 100644
--- a/app/javascript/components/pages/dashboard/components/reporting-location/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/reporting-location/component.jsx
@@ -14,7 +14,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const locations = useMemoizedSelector(state => getLocations(state));
@@ -32,7 +32,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/shared-from-my-team/component.jsx b/app/javascript/components/pages/dashboard/components/shared-from-my-team/component.jsx
index 6be85a35a6..6896c2b3ed 100644
--- a/app/javascript/components/pages/dashboard/components/shared-from-my-team/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/shared-from-my-team/component.jsx
@@ -12,7 +12,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const sharedFromMyTeam = useMemoizedSelector(state => getSharedFromMyTeam(state));
@@ -36,7 +36,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/shared-with-my-team/component.jsx b/app/javascript/components/pages/dashboard/components/shared-with-my-team/component.jsx
index 5918fe2714..8de9300d1b 100644
--- a/app/javascript/components/pages/dashboard/components/shared-with-my-team/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/shared-with-my-team/component.jsx
@@ -12,7 +12,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const sharedWithMyTeam = useMemoizedSelector(state => getSharedWithMyTeam(state));
@@ -36,7 +36,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/violations-category-region/component.jsx b/app/javascript/components/pages/dashboard/components/violations-category-region/component.jsx
index 304d022840..d1a5e209c5 100644
--- a/app/javascript/components/pages/dashboard/components/violations-category-region/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/violations-category-region/component.jsx
@@ -15,7 +15,7 @@ import { OPTION_TYPES } from "../../../../form";
 import { NAME } from "./constants";
 import { getVerifiedData } from "./utils";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const { violationTypes, reportingLocations } = useOptions({
@@ -45,7 +45,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/violations-category-verification-status/component.jsx b/app/javascript/components/pages/dashboard/components/violations-category-verification-status/component.jsx
index 8544b63813..c07abc8f19 100644
--- a/app/javascript/components/pages/dashboard/components/violations-category-verification-status/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/violations-category-verification-status/component.jsx
@@ -14,7 +14,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 import { NAME } from "./constants";
 import { transformToPivotedDashboard } from "./utils";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const { verificationStatus, violationType } = useOptions({
@@ -45,7 +45,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/workflow-individual-cases/component.jsx b/app/javascript/components/pages/dashboard/components/workflow-individual-cases/component.jsx
index b5e1538eaa..fa43c877a4 100644
--- a/app/javascript/components/pages/dashboard/components/workflow-individual-cases/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/workflow-individual-cases/component.jsx
@@ -14,7 +14,7 @@ import css from "../styles.css";
 import { NAME, CLOSED } from "./constants";
 import WorkFlowStep from "./components";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const workflowLabels = useMemoizedSelector(state => getWorkflowLabels(state, MODULES.CP, RECORD_TYPES.cases));
@@ -33,7 +33,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/workflow-individual-cases/components/workflow-step.jsx b/app/javascript/components/pages/dashboard/components/workflow-individual-cases/components/workflow-step.jsx
index 8e7fecb00c..ac2d8342e0 100644
--- a/app/javascript/components/pages/dashboard/components/workflow-individual-cases/components/workflow-step.jsx
+++ b/app/javascript/components/pages/dashboard/components/workflow-individual-cases/components/workflow-step.jsx
@@ -14,7 +14,7 @@ import css from "../styles.css";
 
 import { NAME } from "./constants";
 
-const WorkFlowStep = ({ step = {}, casesWorkflow = fromJS({}), i18n }) => {
+function WorkFlowStep({ step = {}, casesWorkflow = fromJS({}), i18n }) {
   const dispatch = useDispatch();
 
   const workflowData = casesWorkflow.getIn(["indicators", "workflow", step.id], fromJS({}));
@@ -42,7 +42,7 @@ const WorkFlowStep = ({ step = {}, casesWorkflow = fromJS({}), i18n }) => {
   const chipType = count === 0 ? "defaultNoCount" : "default";
 
   return <DashboardChip label={chipText} handleClick={handleClickButton} type={chipType} />;
-};
+}
 
 WorkFlowStep.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/components/workflow-team-cases/component.jsx b/app/javascript/components/pages/dashboard/components/workflow-team-cases/component.jsx
index 3642c62c4f..0552d3cf8e 100644
--- a/app/javascript/components/pages/dashboard/components/workflow-team-cases/component.jsx
+++ b/app/javascript/components/pages/dashboard/components/workflow-team-cases/component.jsx
@@ -13,7 +13,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 
 import { NAME } from "./constants";
 
-const Component = ({ loadingIndicator }) => {
+function Component({ loadingIndicator }) {
   const i18n = useI18n();
 
   const workflowLabels = useMemoizedSelector(state => getWorkflowLabels(state, MODULES.CP, RECORD_TYPES.cases));
@@ -34,7 +34,7 @@ const Component = ({ loadingIndicator }) => {
       </OptionsBox>
     </Permission>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/dashboard/container.jsx b/app/javascript/components/pages/dashboard/container.jsx
index d97b44fd56..4e19a0829f 100644
--- a/app/javascript/components/pages/dashboard/container.jsx
+++ b/app/javascript/components/pages/dashboard/container.jsx
@@ -34,7 +34,7 @@ import NAMESPACE from "./namespace";
 import { NAME } from "./constants";
 import { fetchDashboards, fetchFlags } from "./action-creators";
 
-const Dashboard = () => {
+function Dashboard() {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const canFetchFlags = usePermissions(RESOURCES.dashboards, [ACTIONS.DASH_FLAGS]);
@@ -96,7 +96,7 @@ const Dashboard = () => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 Dashboard.displayName = NAME;
 
diff --git a/app/javascript/components/pages/errors/not-authorized/component.jsx b/app/javascript/components/pages/errors/not-authorized/component.jsx
index ed41798fa6..11dd6720b2 100644
--- a/app/javascript/components/pages/errors/not-authorized/component.jsx
+++ b/app/javascript/components/pages/errors/not-authorized/component.jsx
@@ -10,7 +10,7 @@ import { ACTION_BUTTON_TYPES } from "../../../action-button/constants";
 
 import css from "./styles.css";
 
-const NotAuthorized = () => {
+function NotAuthorized() {
   const i18n = useI18n();
 
   return (
@@ -33,7 +33,7 @@ const NotAuthorized = () => {
       />
     </div>
   );
-};
+}
 
 NotAuthorized.displayName = "NotAuthorized";
 
diff --git a/app/javascript/components/pages/errors/not-found/component.jsx b/app/javascript/components/pages/errors/not-found/component.jsx
index ccb49b5366..f2d963c8ae 100644
--- a/app/javascript/components/pages/errors/not-found/component.jsx
+++ b/app/javascript/components/pages/errors/not-found/component.jsx
@@ -10,7 +10,7 @@ import { ACTION_BUTTON_TYPES } from "../../../action-button/constants";
 
 import css from "./styles.css";
 
-const NotFound = () => {
+function NotFound() {
   const i18n = useI18n();
 
   return (
@@ -33,7 +33,7 @@ const NotFound = () => {
       />
     </div>
   );
-};
+}
 
 NotFound.displayName = "NotFound";
 
diff --git a/app/javascript/components/pages/export-list/container.jsx b/app/javascript/components/pages/export-list/container.jsx
index ddb2dd416a..8c00468be5 100644
--- a/app/javascript/components/pages/export-list/container.jsx
+++ b/app/javascript/components/pages/export-list/container.jsx
@@ -20,7 +20,7 @@ import css from "./styles.css";
 import { selectListHeaders } from "./selectors";
 import { NAME, EXPORT_STATUS, EXPORT_COLUMNS } from "./constants";
 
-const ExportList = () => {
+function ExportList() {
   const i18n = useI18n();
 
   const recordType = "bulk_exports";
@@ -123,7 +123,7 @@ const ExportList = () => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 ExportList.displayName = NAME;
 
diff --git a/app/javascript/components/pages/potential-matches/container.jsx b/app/javascript/components/pages/potential-matches/container.jsx
index 34fef265a2..61add43ae7 100644
--- a/app/javascript/components/pages/potential-matches/container.jsx
+++ b/app/javascript/components/pages/potential-matches/container.jsx
@@ -13,7 +13,7 @@ import css from "./styles.css";
 import { fetchPotentialMatches } from "./action-creators";
 import { selectPotentialMatches } from "./selectors";
 
-const PotentialMatches = ({ getPotentialMatches, potentialMatches }) => {
+function PotentialMatches({ getPotentialMatches, potentialMatches }) {
   useEffect(() => {
     getPotentialMatches();
   }, []);
@@ -90,7 +90,7 @@ const PotentialMatches = ({ getPotentialMatches, potentialMatches }) => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 PotentialMatches.displayName = "PotentialMatches";
 
diff --git a/app/javascript/components/pages/support/component.jsx b/app/javascript/components/pages/support/component.jsx
index f3298c7f2b..3f38ab7a68 100644
--- a/app/javascript/components/pages/support/component.jsx
+++ b/app/javascript/components/pages/support/component.jsx
@@ -15,7 +15,7 @@ import css from "./styles.css";
 import { menuList, renderSupportForm } from "./utils";
 import { Navigation } from "./components";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
 
   const codeOfConduct = useMemoizedSelector(state => getCodesOfConduct(state));
@@ -67,7 +67,7 @@ const Component = () => {
       </div>
     </PageContainer>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/support/components/code-of-conduct/component.jsx b/app/javascript/components/pages/support/components/code-of-conduct/component.jsx
index a1f4ebb28f..f78b6e5e2e 100644
--- a/app/javascript/components/pages/support/components/code-of-conduct/component.jsx
+++ b/app/javascript/components/pages/support/components/code-of-conduct/component.jsx
@@ -13,7 +13,7 @@ import parentCss from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
 
   const codeOfConductAccepteOn = useMemoizedSelector(state => getCodeOfConductAccepteOn(state));
@@ -35,7 +35,7 @@ const Component = () => {
       <Typography className={css.text}>{applicationCodeOfConduct?.get("content")}</Typography>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/support/components/navigation/component.jsx b/app/javascript/components/pages/support/components/navigation/component.jsx
index 13b8c4dbd1..8454450bc2 100644
--- a/app/javascript/components/pages/support/components/navigation/component.jsx
+++ b/app/javascript/components/pages/support/components/navigation/component.jsx
@@ -10,7 +10,7 @@ import { SUPPORT_FORMS } from "../../constants";
 
 import { NAME } from "./constants";
 
-const Component = ({ css, handleToggleNav, menuList, mobileDisplay, onClick, selectedItem, toggleNav }) => {
+function Component({ css, handleToggleNav, menuList, mobileDisplay, onClick, selectedItem, toggleNav }) {
   const hasUnsubmittedOfflineChanges = useMemoizedSelector(state => hasQueueData(state));
 
   const drawerProps = {
@@ -57,7 +57,7 @@ const Component = ({ css, handleToggleNav, menuList, mobileDisplay, onClick, sel
       </List>
     </ConditionalWrapper>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/support/components/terms-of-use/component.jsx b/app/javascript/components/pages/support/components/terms-of-use/component.jsx
index 51a5cc9294..896faeafce 100644
--- a/app/javascript/components/pages/support/components/terms-of-use/component.jsx
+++ b/app/javascript/components/pages/support/components/terms-of-use/component.jsx
@@ -13,7 +13,7 @@ import ActionButton from "../../../../action-button";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
 
   const agenciesWithTermsOfUse = useMemoizedSelector(state => getAgencyTermsOfUse(state));
@@ -47,7 +47,7 @@ const Component = () => {
       {renderAgencyWihTermsOfUse}
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pages/task-list/container.jsx b/app/javascript/components/pages/task-list/container.jsx
index 3407b271a0..564c92e0e0 100644
--- a/app/javascript/components/pages/task-list/container.jsx
+++ b/app/javascript/components/pages/task-list/container.jsx
@@ -23,7 +23,7 @@ import css from "./styles.css";
 import { TASK_STATUS } from "./constants";
 import { getTranslatedValue } from "./utils";
 
-const TaskList = () => {
+function TaskList() {
   const i18n = useI18n();
 
   const recordType = "tasks";
@@ -197,7 +197,7 @@ const TaskList = () => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 TaskList.displayName = "TaskList";
 
diff --git a/app/javascript/components/password-reset-confirmation/component.jsx b/app/javascript/components/password-reset-confirmation/component.jsx
index dbf3a8f086..8e443c6c30 100644
--- a/app/javascript/components/password-reset-confirmation/component.jsx
+++ b/app/javascript/components/password-reset-confirmation/component.jsx
@@ -9,7 +9,7 @@ import useMemoizedSelector from "../../libs/use-memoized-selector";
 
 import { NAME } from "./constants";
 
-const Component = ({ open = false, handleCancel, handleSuccess }) => {
+function Component({ open = false, handleCancel, handleSuccess }) {
   const i18n = useI18n();
 
   const pending = useMemoizedSelector(state => getPasswordResetLoading(state));
@@ -35,7 +35,7 @@ const Component = ({ open = false, handleCancel, handleSuccess }) => {
       <p>{i18n.t("user.password_reset_text")}</p>
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/password-reset/component.jsx b/app/javascript/components/password-reset/component.jsx
index 17ca25f13d..2b71734c8b 100644
--- a/app/javascript/components/password-reset/component.jsx
+++ b/app/javascript/components/password-reset/component.jsx
@@ -14,7 +14,7 @@ import useMemoizedSelector from "../../libs/use-memoized-selector";
 import { form, validationSchema } from "./form";
 import { NAME, RESET_PASSWORD_FORM } from "./constants";
 
-const Component = () => {
+function Component() {
   const i18n = useI18n();
   const location = useLocation();
   const dispatch = useDispatch();
@@ -47,7 +47,7 @@ const Component = () => {
       />
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/pdf-exporter/components/key-value-cell/component.jsx b/app/javascript/components/pdf-exporter/components/key-value-cell/component.jsx
index 17f2e3e404..df06f16048 100644
--- a/app/javascript/components/pdf-exporter/components/key-value-cell/component.jsx
+++ b/app/javascript/components/pdf-exporter/components/key-value-cell/component.jsx
@@ -17,7 +17,7 @@ import useOptions from "../../../form/use-options";
 
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   classes,
   defaultValue,
   displayName,
@@ -27,7 +27,7 @@ const Component = ({
   optionsStringSource = null,
   type,
   value = ""
-}) => {
+}) {
   const i18n = useI18n();
 
   const isDateField = type === DATE_FIELD;
@@ -98,7 +98,7 @@ const Component = ({
       <div>{renderValue(cellValue)}</div>
     </div>
   );
-};
+}
 
 Component.displayName = "KeyValueCell";
 
diff --git a/app/javascript/components/pdf-exporter/components/logos/component.jsx b/app/javascript/components/pdf-exporter/components/logos/component.jsx
index 84ab622a20..d1ba359a9d 100644
--- a/app/javascript/components/pdf-exporter/components/logos/component.jsx
+++ b/app/javascript/components/pdf-exporter/components/logos/component.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { useI18n } from "../../../i18n";
 import { RECORD_TYPES_PLURAL } from "../../../../config";
 
-const Component = ({ shortId, recordType, logos = [], css }) => {
+function Component({ shortId, recordType, logos = [], css }) {
   const i18n = useI18n();
 
   if (!logos) return null;
@@ -25,7 +25,7 @@ const Component = ({ shortId, recordType, logos = [], css }) => {
       </div>
     </div>
   );
-};
+}
 
 Component.propTypes = {
   css: PropTypes.object,
diff --git a/app/javascript/components/pdf-exporter/components/render-table/component.js b/app/javascript/components/pdf-exporter/components/render-table/component.js
index c26b804a9f..7006255963 100644
--- a/app/javascript/components/pdf-exporter/components/render-table/component.js
+++ b/app/javascript/components/pdf-exporter/components/render-table/component.js
@@ -6,14 +6,14 @@ import Table from "../table";
 
 import css from "./styles.css";
 
-const Component = ({ title, fields, data }) => {
+function Component({ title, fields, data }) {
   return (
     <div className={css.group}>
       <h2>{title}</h2>
       <Table fields={fields} record={data} />
     </div>
   );
-};
+}
 
 Component.displayName = "RenderTable";
 
diff --git a/app/javascript/components/pdf-exporter/components/signatures/component.jsx b/app/javascript/components/pdf-exporter/components/signatures/component.jsx
index ef0e83b85c..08988bdeaa 100644
--- a/app/javascript/components/pdf-exporter/components/signatures/component.jsx
+++ b/app/javascript/components/pdf-exporter/components/signatures/component.jsx
@@ -7,7 +7,7 @@ import { useI18n } from "../../../i18n";
 import css from "./styles.css";
 import { SIGNATURE_LABELS } from "./constants";
 
-const Component = ({ types = [] }) => {
+function Component({ types = [] }) {
   const i18n = useI18n();
 
   if (!types.length) return null;
@@ -30,7 +30,7 @@ const Component = ({ types = [] }) => {
         ))}
     </div>
   );
-};
+}
 
 Component.propTypes = {
   types: PropTypes.array
diff --git a/app/javascript/components/pdf-exporter/components/table/component.jsx b/app/javascript/components/pdf-exporter/components/table/component.jsx
index 446a19ea5a..9c7aba279b 100644
--- a/app/javascript/components/pdf-exporter/components/table/component.jsx
+++ b/app/javascript/components/pdf-exporter/components/table/component.jsx
@@ -14,7 +14,7 @@ import {
 import { EXCLUDED_FIELD_TYPES } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ fields, isSubform = false, record }) => {
+function Component({ fields, isSubform = false, record }) {
   const i18n = useI18n();
 
   const classes = {
@@ -83,7 +83,7 @@ const Component = ({ fields, isSubform = false, record }) => {
       })}
     </>
   );
-};
+}
 
 Component.displayName = "Table";
 
diff --git a/app/javascript/components/permissions/component.js b/app/javascript/components/permissions/component.js
index 38d530ebba..8c9160ff85 100644
--- a/app/javascript/components/permissions/component.js
+++ b/app/javascript/components/permissions/component.js
@@ -13,7 +13,7 @@ import { getPermissions } from "../user/selectors";
 
 import { RESOURCES } from "./constants";
 
-const Component = ({ resources, actions = [], redirect = false, children }) => {
+function Component({ resources, actions = [], redirect = false, children }) {
   const { recordType } = useParams();
 
   const type = resources || recordType;
@@ -60,7 +60,7 @@ const Component = ({ resources, actions = [], redirect = false, children }) => {
   }
 
   return null;
-};
+}
 
 Component.displayName = "Permission";
 
diff --git a/app/javascript/components/record-actions/add-incident/component.jsx b/app/javascript/components/record-actions/add-incident/component.jsx
index 3d713184db..7cdea0f42e 100644
--- a/app/javascript/components/record-actions/add-incident/component.jsx
+++ b/app/javascript/components/record-actions/add-incident/component.jsx
@@ -23,7 +23,7 @@ import { NAME, INCIDENT_SUBFORM, INCIDENTS_SUBFORM_NAME } from "./constants";
 import { validationSchema } from "./utils";
 import Fields from "./fields";
 
-const Component = ({ open, close, pending, recordType, selectedRowsIndex, setPending }) => {
+function Component({ open, close, pending, recordType, selectedRowsIndex, setPending }) {
   const formikRef = useRef();
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -127,7 +127,7 @@ const Component = ({ open, close, pending, recordType, selectedRowsIndex, setPen
       </ActionDialog>
     </Formik>
   );
-};
+}
 
 Component.propTypes = {
   close: PropTypes.func,
diff --git a/app/javascript/components/record-actions/add-incident/fields/component.jsx b/app/javascript/components/record-actions/add-incident/fields/component.jsx
index 2a16f2a007..43ac078fd3 100644
--- a/app/javascript/components/record-actions/add-incident/fields/component.jsx
+++ b/app/javascript/components/record-actions/add-incident/fields/component.jsx
@@ -8,7 +8,7 @@ import { FieldRecord, FormSectionField } from "../../../record-form";
 
 import { NAME } from "./constants";
 
-const Component = ({ recordModuleID, recordType, fields, formik }) => {
+function Component({ recordModuleID, recordType, fields, formik }) {
   const [filterState, setFilterState] = useState({
     filtersChanged: false,
     userIsSelected: false
@@ -51,7 +51,7 @@ const Component = ({ recordModuleID, recordType, fields, formik }) => {
     });
 
   return <>{renderFields}</>;
-};
+}
 
 Component.propTypes = {
   fields: PropTypes.array,
diff --git a/app/javascript/components/record-actions/add-service/component.jsx b/app/javascript/components/record-actions/add-service/component.jsx
index 87d9b2a757..181aaa4b3d 100644
--- a/app/javascript/components/record-actions/add-service/component.jsx
+++ b/app/javascript/components/record-actions/add-service/component.jsx
@@ -21,7 +21,7 @@ import { useMemoizedSelector } from "../../../libs";
 
 import { NAME, SERVICES_SUBFORM, SERVICES_SUBFORM_NAME } from "./constants";
 
-const Component = ({ open, close, pending, recordType, selectedRowsIndex, setPending }) => {
+function Component({ open, close, pending, recordType, selectedRowsIndex, setPending }) {
   const formikRef = useRef();
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -117,7 +117,7 @@ const Component = ({ open, close, pending, recordType, selectedRowsIndex, setPen
       </ActionDialog>
     </Formik>
   );
-};
+}
 
 Component.propTypes = {
   close: PropTypes.func,
diff --git a/app/javascript/components/record-actions/container.jsx b/app/javascript/components/record-actions/container.jsx
index 910aa953d2..bcfcc4b4b4 100644
--- a/app/javascript/components/record-actions/container.jsx
+++ b/app/javascript/components/record-actions/container.jsx
@@ -38,15 +38,7 @@ import {
 import { NAME } from "./config";
 import { isDisabledAction, buildApprovalList, buildActionList, subformExists } from "./utils";
 
-const Container = ({
-  currentPage,
-  mode,
-  record,
-  recordType,
-  selectedRecords,
-  clearSelectedRecords,
-  showListActions
-}) => {
+function Container({ currentPage, mode, record, recordType, selectedRecords, clearSelectedRecords, showListActions }) {
   const i18n = useI18n();
   const { approvalsLabels } = useApp();
   const { currentDialog, dialogClose, dialogOpen, pending, setDialog, setDialogPending } = useDialog([
@@ -206,7 +198,7 @@ const Container = ({
         })}
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/exports/component.jsx b/app/javascript/components/record-actions/exports/component.jsx
index 734e2a8d39..6f0a43860f 100644
--- a/app/javascript/components/record-actions/exports/component.jsx
+++ b/app/javascript/components/record-actions/exports/component.jsx
@@ -52,7 +52,7 @@ import { buildFields, exportFormsOptions, formatFields, formatFileName, isCustom
 
 const FORM_ID = "exports-record-form";
 
-const Component = ({
+function Component({
   close,
   currentPage,
   match,
@@ -63,7 +63,7 @@ const Component = ({
   selectedRecords,
   setPending,
   userPermissions
-}) => {
+}) {
   const i18n = useI18n();
   const pdfExporterRef = useRef();
   const dispatch = useDispatch();
@@ -351,7 +351,7 @@ const Component = ({
       )}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/link-incident-to-case/component.jsx b/app/javascript/components/record-actions/link-incident-to-case/component.jsx
index dc0f44ef83..b9d8cd0ff7 100644
--- a/app/javascript/components/record-actions/link-incident-to-case/component.jsx
+++ b/app/javascript/components/record-actions/link-incident-to-case/component.jsx
@@ -18,7 +18,7 @@ import { NAME } from "./constants";
 import css from "./styles.css";
 import Content from "./content";
 
-const Component = ({ close, open, currentPage, selectedRecords, recordType, record }) => {
+function Component({ close, open, currentPage, selectedRecords, recordType, record }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { ...methods } = useForm();
@@ -93,7 +93,7 @@ const Component = ({ close, open, currentPage, selectedRecords, recordType, reco
       </SubformDrawer>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/mark-for-offline/component.jsx b/app/javascript/components/record-actions/mark-for-offline/component.jsx
index c34aa88fa6..0b3686bf4a 100644
--- a/app/javascript/components/record-actions/mark-for-offline/component.jsx
+++ b/app/javascript/components/record-actions/mark-for-offline/component.jsx
@@ -13,7 +13,7 @@ import { RECORD_TYPES_PLURAL } from "../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ close, open, recordType, currentPage, selectedRecords, clearSelectedRecords }) => {
+function Component({ close, open, recordType, currentPage, selectedRecords, clearSelectedRecords }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -43,7 +43,7 @@ const Component = ({ close, open, recordType, currentPage, selectedRecords, clea
       pending={markedForMobileLoadingCases || markedForMobileLoadingRegistry}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/notes/component.jsx b/app/javascript/components/record-actions/notes/component.jsx
index 7270ac7e04..7715fdf939 100644
--- a/app/javascript/components/record-actions/notes/component.jsx
+++ b/app/javascript/components/record-actions/notes/component.jsx
@@ -21,7 +21,7 @@ const validationSchema = object().shape({
   note_text: string().required()
 });
 
-const Component = ({ close, open, pending, record, recordType, setPending }) => {
+function Component({ close, open, pending, record, recordType, setPending }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -94,7 +94,7 @@ const Component = ({ close, open, pending, record, recordType, setPending }) =>
       />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/request-approval/approval-form.jsx b/app/javascript/components/record-actions/request-approval/approval-form.jsx
index f78ba74fd2..be74d00608 100644
--- a/app/javascript/components/record-actions/request-approval/approval-form.jsx
+++ b/app/javascript/components/record-actions/request-approval/approval-form.jsx
@@ -17,7 +17,7 @@ import { useI18n } from "../../i18n";
 import { APPROVAL_FORM } from "./constants";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   approval,
   disabled,
   handleChangeApproval,
@@ -25,7 +25,7 @@ const Component = ({
   handleChangeType,
   requestType,
   selectOptions
-}) => {
+}) {
   const i18n = useI18n();
 
   return (
@@ -80,7 +80,7 @@ const Component = ({
       </form>
     </>
   );
-};
+}
 
 Component.displayName = APPROVAL_FORM;
 
diff --git a/app/javascript/components/record-actions/request-approval/component.jsx b/app/javascript/components/record-actions/request-approval/component.jsx
index c6caf70f1f..246e94b59e 100644
--- a/app/javascript/components/record-actions/request-approval/component.jsx
+++ b/app/javascript/components/record-actions/request-approval/component.jsx
@@ -21,7 +21,7 @@ import ApprovalForm from "./approval-form";
 import { APPROVAL_TYPE_LOOKUP, CASE_PLAN, NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   close,
   open,
   subMenuItems,
@@ -31,7 +31,7 @@ const Component = ({
   setPending,
   approvalType,
   confirmButtonLabel
-}) => {
+}) {
   const i18n = useI18n();
   const { approvalsLabels, userModules } = useApp();
   const dispatch = useDispatch();
@@ -214,7 +214,7 @@ const Component = ({
       {dialogContent}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/toggle-enable/component.jsx b/app/javascript/components/record-actions/toggle-enable/component.jsx
index 6346bf7ae9..a3477fff22 100644
--- a/app/javascript/components/record-actions/toggle-enable/component.jsx
+++ b/app/javascript/components/record-actions/toggle-enable/component.jsx
@@ -10,7 +10,7 @@ import { RECORD_TYPES_PLURAL } from "../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ close, open, record, recordType }) => {
+function Component({ close, open, record, recordType }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const enableState = record && !record.get("record_state") ? "enable" : "disable";
@@ -52,7 +52,7 @@ const Component = ({ close, open, record, recordType }) => {
       confirmButtonLabel={i18n.t("cases.ok")}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/toggle-open/component.jsx b/app/javascript/components/record-actions/toggle-open/component.jsx
index 6f2c90e513..c5c463ca4a 100644
--- a/app/javascript/components/record-actions/toggle-open/component.jsx
+++ b/app/javascript/components/record-actions/toggle-open/component.jsx
@@ -10,7 +10,7 @@ import { ACTIONS } from "../../permissions";
 
 import { NAME } from "./constants";
 
-const ToggleOpen = ({ close, open, record, recordType }) => {
+function ToggleOpen({ close, open, record, recordType }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const setValue = record && record.get("status") === "open" ? "close" : "reopen";
@@ -48,7 +48,7 @@ const ToggleOpen = ({ close, open, record, recordType }) => {
       confirmButtonLabel={i18n.t("cases.ok")}
     />
   );
-};
+}
 
 ToggleOpen.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/component.jsx b/app/javascript/components/record-actions/transitions/component.jsx
index c33799660b..d0e0e534a0 100644
--- a/app/javascript/components/record-actions/transitions/component.jsx
+++ b/app/javascript/components/record-actions/transitions/component.jsx
@@ -19,7 +19,7 @@ import { hasProvidedConsent } from "./components/utils";
 import { ReassignForm, TransitionDialog, Transfers } from "./components";
 import Referrals from "./referrals/component";
 
-const Transitions = ({
+function Transitions({
   close,
   open = false,
   currentDialog,
@@ -30,7 +30,7 @@ const Transitions = ({
   currentPage,
   selectedRecords,
   mode
-}) => {
+}) {
   const i18n = useI18n();
   const providedConsent = (record && hasProvidedConsent(record)) || false;
   const assignFormikRef = useRef();
@@ -170,7 +170,7 @@ const Transitions = ({
       {transitionComponent()}
     </TransitionDialog>
   );
-};
+}
 
 Transitions.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/components/reassign-form.jsx b/app/javascript/components/record-actions/transitions/components/reassign-form.jsx
index ad7099e1e5..c7422ced83 100644
--- a/app/javascript/components/record-actions/transitions/components/reassign-form.jsx
+++ b/app/javascript/components/record-actions/transitions/components/reassign-form.jsx
@@ -30,7 +30,7 @@ import css from "./styles.css";
 
 const initialValues = { transitioned_to: "", notes: "" };
 
-const ReassignForm = ({
+function ReassignForm({
   record,
   recordType,
   setPending,
@@ -40,7 +40,7 @@ const ReassignForm = ({
   selectedRecordsLength,
   currentRecordsSize,
   formDisabled = false
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const location = useLocation();
@@ -197,7 +197,7 @@ const ReassignForm = ({
       }}
     </Formik>
   );
-};
+}
 
 ReassignForm.displayName = REASSIGN_FORM_NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/component.jsx b/app/javascript/components/record-actions/transitions/components/referrals/component.jsx
index 348cf90e60..060cbd2426 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/component.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/component.jsx
@@ -32,7 +32,7 @@ import {
   TRANSITIONED_TO_FIELD
 } from "./constants";
 
-const ReferralForm = ({
+function ReferralForm({
   canConsentOverride,
   providedConsent,
   recordType,
@@ -42,7 +42,7 @@ const ReferralForm = ({
   setPending,
   disabled,
   setDisabled
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -133,7 +133,7 @@ const ReferralForm = ({
   };
 
   return <Formik {...formProps} />;
-};
+}
 
 ReferralForm.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/form-internal.jsx b/app/javascript/components/record-actions/transitions/components/referrals/form-internal.jsx
index ee6eda483f..17a427e110 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/form-internal.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/form-internal.jsx
@@ -9,7 +9,7 @@ import SearchableSelect from "../../../../searchable-select";
 
 import { NOTES_FIELD } from "./constants";
 
-const FormInternal = ({ fields, disabled, isReferralFromService }) => {
+function FormInternal({ fields, disabled, isReferralFromService }) {
   const i18n = useI18n();
   const internalFields = fields.map(f => {
     if (!Object.keys(f).includes("options")) {
@@ -82,7 +82,7 @@ const FormInternal = ({ fields, disabled, isReferralFromService }) => {
   });
 
   return <>{internalFields}</>;
-};
+}
 
 FormInternal.displayName = "ReferralFormInternal";
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/main-form.jsx b/app/javascript/components/record-actions/transitions/components/referrals/main-form.jsx
index e4ffaa0673..4f6544f388 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/main-form.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/main-form.jsx
@@ -25,7 +25,7 @@ import FormInternal from "./form-internal";
 import { TRANSITIONED_TO_FIELD, MAIN_FORM, SERVICE_RECORD_FIELD } from "./constants";
 import { buildFields } from "./utils";
 
-const MainForm = ({ formProps, rest }) => {
+function MainForm({ formProps, rest }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const firstUpdate = useRef(true);
@@ -147,7 +147,7 @@ const MainForm = ({ formProps, rest }) => {
       />
     </Form>
   );
-};
+}
 
 MainForm.displayName = MAIN_FORM;
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/main-form.spec.js b/app/javascript/components/record-actions/transitions/components/referrals/main-form.spec.js
index 731a87418c..2275cbd963 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/main-form.spec.js
+++ b/app/javascript/components/record-actions/transitions/components/referrals/main-form.spec.js
@@ -6,12 +6,12 @@ import { mountedComponent, screen } from "../../../../../test-utils";
 import MainForm from "./main-form";
 
 // eslint-disable-next-line react/display-name
-const FormikStub = props => {
+function FormikStub(props) {
   // eslint-disable-next-line react/prop-types
   const { formProps } = props;
 
   return <Formik {...formProps} />;
-};
+}
 
 describe("<MainForm />", () => {
   const initialState = fromJS({
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/on-change-refer-anyway.jsx b/app/javascript/components/record-actions/transitions/components/referrals/on-change-refer-anyway.jsx
index bb1f99e9cb..11b1cc2a0a 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/on-change-refer-anyway.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/on-change-refer-anyway.jsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
-/* eslint-disable react/display-name, react/prop-types */
+/* eslint-disable react/display-name, react/prop-types, react/function-component-definition */
 
 import { Checkbox } from "@mui/material";
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/provided-consent.jsx b/app/javascript/components/record-actions/transitions/components/referrals/provided-consent.jsx
index 3c314d7663..65355cee08 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/provided-consent.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/provided-consent.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { PROVIDED_CONSENT_NAME as NAME } from "./constants";
 import ProvidedForm from "./provided-form";
 
-const ProvidedConsent = ({ canConsentOverride, providedConsent, setDisabled, recordType }) => {
+function ProvidedConsent({ canConsentOverride, providedConsent, setDisabled, recordType }) {
   if (providedConsent) {
     return null;
   }
@@ -16,7 +16,7 @@ const ProvidedConsent = ({ canConsentOverride, providedConsent, setDisabled, rec
   };
 
   return <ProvidedForm {...providedConsentFormProps} />;
-};
+}
 
 ProvidedConsent.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/components/referrals/provided-form.jsx b/app/javascript/components/record-actions/transitions/components/referrals/provided-form.jsx
index 75ebe5aa59..9a8835db1b 100644
--- a/app/javascript/components/record-actions/transitions/components/referrals/provided-form.jsx
+++ b/app/javascript/components/record-actions/transitions/components/referrals/provided-form.jsx
@@ -11,7 +11,7 @@ import css from "../../styles.css";
 import { PROVIDED_FORM_NAME as NAME } from "./constants";
 import onChangeReferAnyway from "./on-change-refer-anyway";
 
-const ProvidedForm = ({ setDisabled, canConsentOverride }) => {
+function ProvidedForm({ setDisabled, canConsentOverride }) {
   const i18n = useI18n();
 
   const fieldReferAnyway = (
@@ -42,7 +42,7 @@ const ProvidedForm = ({ setDisabled, canConsentOverride }) => {
       </Grid>
     </div>
   );
-};
+}
 
 ProvidedForm.displayName = NAME;
 
diff --git a/app/javascript/components/record-actions/transitions/components/transfers/component.jsx b/app/javascript/components/record-actions/transitions/components/transfers/component.jsx
index 718945f833..5ef8a59142 100644
--- a/app/javascript/components/record-actions/transitions/components/transfers/component.jsx
+++ b/app/javascript/components/record-actions/transitions/components/transfers/component.jsx
@@ -23,7 +23,7 @@ import {
 } from "./constants";
 import { form, validations } from "./form";
 
-const TransferForm = ({
+function TransferForm({
   providedConsent,
   isBulkTransfer,
   canConsentOverride,
@@ -31,7 +31,7 @@ const TransferForm = ({
   recordType,
   setPending,
   setDisabled
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -87,7 +87,7 @@ const TransferForm = ({
       initialValues={initialValues}
     />
   );
-};
+}
 
 TransferForm.propTypes = {
   canConsentOverride: PropTypes.bool,
diff --git a/app/javascript/components/record-actions/transitions/components/transition-dialog.jsx b/app/javascript/components/record-actions/transitions/components/transition-dialog.jsx
index 9d84392451..9a403c9f77 100644
--- a/app/javascript/components/record-actions/transitions/components/transition-dialog.jsx
+++ b/app/javascript/components/record-actions/transitions/components/transition-dialog.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../../../i18n";
 import { RECORD_TYPES } from "../../../../config";
 import { MAX_BULK_RECORDS } from "../constants";
 
-const TransitionDialog = ({
+function TransitionDialog({
   onClose,
   children,
   confirmButtonLabel,
@@ -23,7 +23,7 @@ const TransitionDialog = ({
   enabledSuccessButton,
   selectedRecordsLength = 0,
   disableActions = false
-}) => {
+}) {
   const i18n = useI18n();
 
   const title = (type => {
@@ -69,7 +69,7 @@ const TransitionDialog = ({
   };
 
   return <ActionDialog {...dialogProps}>{children}</ActionDialog>;
-};
+}
 
 TransitionDialog.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/app/javascript/components/record-actions/transitions/referrals/component.jsx b/app/javascript/components/record-actions/transitions/referrals/component.jsx
index b327a62fbf..0c128da6dc 100644
--- a/app/javascript/components/record-actions/transitions/referrals/component.jsx
+++ b/app/javascript/components/record-actions/transitions/referrals/component.jsx
@@ -31,7 +31,7 @@ import {
 } from "./constants";
 import { form, validations } from "./form";
 
-const Referrals = ({
+function Referrals({
   formID,
   providedConsent,
   canConsentOverride,
@@ -40,7 +40,7 @@ const Referrals = ({
   setDisabled,
   setPending,
   handleClose
-}) => {
+}) {
   const i18n = useI18n();
   const pdfExporterRef = useRef();
   const dispatch = useDispatch();
@@ -146,7 +146,7 @@ const Referrals = ({
       />
     </LoadingIndicator>
   );
-};
+}
 
 Referrals.displayName = "Referrals";
 
diff --git a/app/javascript/components/record-actions/transitions/referrals/components/consent-provided/component.jsx b/app/javascript/components/record-actions/transitions/referrals/components/consent-provided/component.jsx
index b3f95d9a21..6324a438a9 100644
--- a/app/javascript/components/record-actions/transitions/referrals/components/consent-provided/component.jsx
+++ b/app/javascript/components/record-actions/transitions/referrals/components/consent-provided/component.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../../../i18n";
 
 import css from "./styles.css";
 
-const Component = ({ children }) => {
+function Component({ children }) {
   const i18n = useI18n();
 
   return (
@@ -18,7 +18,7 @@ const Component = ({ children }) => {
       {children}
     </Alert>
   );
-};
+}
 
 Component.displayName = "ConsentProvided";
 
diff --git a/app/javascript/components/record-creation-flow/component.jsx b/app/javascript/components/record-creation-flow/component.jsx
index 0f3645bb70..942ec7192c 100644
--- a/app/javascript/components/record-creation-flow/component.jsx
+++ b/app/javascript/components/record-creation-flow/component.jsx
@@ -21,7 +21,7 @@ import { ConsentPrompt, SearchPrompt } from "./components";
 import { NAME, DATA_PROTECTION_FIELDS } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ open, onClose, recordType, primeroModule }) => {
+function Component({ open, onClose, recordType, primeroModule }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -115,7 +115,7 @@ const Component = ({ open, onClose, recordType, primeroModule }) => {
       </div>
     </Drawer>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-creation-flow/components/consent-prompt/component.jsx b/app/javascript/components/record-creation-flow/components/consent-prompt/component.jsx
index 8965b4bec8..89abaaec3c 100644
--- a/app/javascript/components/record-creation-flow/components/consent-prompt/component.jsx
+++ b/app/javascript/components/record-creation-flow/components/consent-prompt/component.jsx
@@ -21,7 +21,7 @@ import { NAME, CONSENT, FORM_ID, LEGITIMATE_BASIS } from "./constants";
 import css from "./styles.css";
 import { consentPromptForm } from "./forms";
 
-const Component = ({
+function Component({
   i18n,
   recordType,
   searchValue,
@@ -29,7 +29,7 @@ const Component = ({
   dataProtectionFields,
   goToNewCase,
   openConsentPrompt
-}) => {
+}) {
   const dispatch = useDispatch();
   const formMode = whichFormMode(FORM_MODE_NEW);
   const methods = useForm();
@@ -103,7 +103,7 @@ const Component = ({
       </form>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-creation-flow/components/search-prompt/component.jsx b/app/javascript/components/record-creation-flow/components/search-prompt/component.jsx
index b4fdcf4786..572efaf443 100644
--- a/app/javascript/components/record-creation-flow/components/search-prompt/component.jsx
+++ b/app/javascript/components/record-creation-flow/components/search-prompt/component.jsx
@@ -20,7 +20,7 @@ import { NAME, FORM_ID, QUERY } from "./constants";
 import { searchPromptForm } from "./forms";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   i18n,
   onCloseDrawer,
   recordType,
@@ -30,7 +30,7 @@ const Component = ({
   dataProtectionFields,
   onSearchCases,
   openConsentPrompt
-}) => {
+}) {
   const formMode = whichFormMode(FORM_MODE_NEW);
   const dispatch = useDispatch();
   const methods = useForm();
@@ -106,7 +106,7 @@ const Component = ({
       <FormHelperText>{i18n.t("case.search_helper_text")}</FormHelperText>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form-alerts/component.jsx b/app/javascript/components/record-form-alerts/component.jsx
index 5d2dccf482..4e01f2bee7 100644
--- a/app/javascript/components/record-form-alerts/component.jsx
+++ b/app/javascript/components/record-form-alerts/component.jsx
@@ -15,7 +15,7 @@ import { usePermissions, REMOVE_ALERT } from "../permissions";
 import { getMessageData } from "./utils";
 import { NAME } from "./constants";
 
-const Component = ({ form, recordType, attachmentForms = fromJS([]), formMode }) => {
+function Component({ form, recordType, attachmentForms = fromJS([]), formMode }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -78,7 +78,7 @@ const Component = ({ form, recordType, attachmentForms = fromJS([]), formMode })
       {items?.size ? <InternalAlert items={fromJS(items)} /> : null}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/components/record-form/component.jsx b/app/javascript/components/record-form/components/record-form/component.jsx
index cbe0296374..0edb82f11a 100644
--- a/app/javascript/components/record-form/components/record-form/component.jsx
+++ b/app/javascript/components/record-form/components/record-form/component.jsx
@@ -29,7 +29,7 @@ import css from "../../styles.css";
 import { compactBlank, compactReadOnlyFields, compactValues, getRedirectPath } from "../../utils";
 import externalForms from "../external-forms";
 
-const Component = ({
+function Component({
   approvalSubforms,
   attachmentForms,
   canRefer,
@@ -54,7 +54,7 @@ const Component = ({
   shouldFetchRecord,
   summaryForm,
   userPermittedFormsIds
-}) => {
+}) {
   let submitForm = null;
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
 
@@ -350,7 +350,7 @@ const Component = ({
       </LoadingIndicator>
     </PageContainer>
   );
-};
+}
 
 Component.displayName = "RecordForm";
 
diff --git a/app/javascript/components/record-form/components/render-form-sections.spec.js b/app/javascript/components/record-form/components/render-form-sections.spec.js
index 471a748b6c..abcf1557a6 100644
--- a/app/javascript/components/record-form/components/render-form-sections.spec.js
+++ b/app/javascript/components/record-form/components/render-form-sections.spec.js
@@ -66,7 +66,9 @@ describe("renderFormSections()", () => {
       );
 
     // eslint-disable-next-line react/display-name
-    const RenderedFormSections = () => <>{formSection()}</>;
+    function RenderedFormSections() {
+      return <>{formSection()}</>;
+    }
 
     mountedComponent(<RenderedFormSections />, {}, {}, [], { initialValues: {} });
 
diff --git a/app/javascript/components/record-form/container.jsx b/app/javascript/components/record-form/container.jsx
index 2a3f9fce8b..b9d60409f5 100644
--- a/app/javascript/components/record-form/container.jsx
+++ b/app/javascript/components/record-form/container.jsx
@@ -34,7 +34,7 @@ import { RecordForm } from "./components/record-form";
 
 let caseRegistryLoaded = false;
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const params = useParams();
   const { demo } = useApp();
   const dispatch = useDispatch();
@@ -132,7 +132,7 @@ const Container = ({ mode }) => {
       incidentsSubforms={incidentsSubforms}
     />
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/components/disabled-record-indicator.jsx b/app/javascript/components/record-form/form/components/disabled-record-indicator.jsx
index 0142972b7c..fd06ab70aa 100644
--- a/app/javascript/components/record-form/form/components/disabled-record-indicator.jsx
+++ b/app/javascript/components/record-form/form/components/disabled-record-indicator.jsx
@@ -7,7 +7,7 @@ import PropTypes from "prop-types";
 import { useI18n } from "../../../i18n";
 import css from "../styles.css";
 
-const DisabledRecordIndicator = ({ recordType }) => {
+function DisabledRecordIndicator({ recordType }) {
   const i18n = useI18n();
 
   return (
@@ -19,7 +19,7 @@ const DisabledRecordIndicator = ({ recordType }) => {
       label={i18n.t(`${recordType}.messages.disabled`)}
     />
   );
-};
+}
 
 DisabledRecordIndicator.displayName = "DisabledRecordIndicator";
 
diff --git a/app/javascript/components/record-form/form/components/guiding-questions.jsx b/app/javascript/components/record-form/form/components/guiding-questions.jsx
index 438abea6ff..2a5ed4ef76 100644
--- a/app/javascript/components/record-form/form/components/guiding-questions.jsx
+++ b/app/javascript/components/record-form/form/components/guiding-questions.jsx
@@ -9,7 +9,7 @@ import HelpIcon from "@mui/icons-material/Help";
 import css from "./styles.css";
 import { GUIDING_QUESTIONS_NAME } from "./constants";
 
-const GuidingQuestions = ({ label, text }) => {
+function GuidingQuestions({ label, text }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = event => {
@@ -49,7 +49,7 @@ const GuidingQuestions = ({ label, text }) => {
       </Popover>
     </>
   );
-};
+}
 
 GuidingQuestions.displayName = GUIDING_QUESTIONS_NAME;
 
diff --git a/app/javascript/components/record-form/form/components/sync-record.jsx b/app/javascript/components/record-form/form/components/sync-record.jsx
index 43128432ac..aeea1ba809 100644
--- a/app/javascript/components/record-form/form/components/sync-record.jsx
+++ b/app/javascript/components/record-form/form/components/sync-record.jsx
@@ -14,7 +14,7 @@ import { SYNC_RECORD_NAME, SYNC_RECORD_STATUS } from "./constants";
 import { buildLabelSync } from "./utils";
 import css from "./styles.css";
 
-const SyncRecord = ({ i18n, isEnabledWebhookSyncFor, syncedAt, syncStatus, params }) => {
+function SyncRecord({ i18n, isEnabledWebhookSyncFor, syncedAt, syncStatus, params }) {
   const dispatch = useDispatch();
 
   if (!isEnabledWebhookSyncFor) {
@@ -64,7 +64,7 @@ const SyncRecord = ({ i18n, isEnabledWebhookSyncFor, syncedAt, syncStatus, param
       {renderCheckStatusBtn}
     </div>
   );
-};
+}
 
 SyncRecord.displayName = SYNC_RECORD_NAME;
 
diff --git a/app/javascript/components/record-form/form/components/validation-errors.jsx b/app/javascript/components/record-form/form/components/validation-errors.jsx
index d063240a6e..27b55d7a23 100644
--- a/app/javascript/components/record-form/form/components/validation-errors.jsx
+++ b/app/javascript/components/record-form/form/components/validation-errors.jsx
@@ -15,7 +15,7 @@ import { useMemoizedSelector } from "../../../../libs";
 import { removeEmptyArrays } from "./utils";
 import { VALIDATION_ERRORS_NAME } from "./constants";
 
-const ValidationErrors = ({ formErrors, forms, submitCount }) => {
+function ValidationErrors({ formErrors, forms, submitCount }) {
   const dispatch = useDispatch();
   const i18n = useI18n();
 
@@ -72,7 +72,7 @@ const ValidationErrors = ({ formErrors, forms, submitCount }) => {
   }, [formErrors, submitCount]);
 
   return null;
-};
+}
 
 ValidationErrors.displayName = VALIDATION_ERRORS_NAME;
 
diff --git a/app/javascript/components/record-form/form/components/workflow-indicator.jsx b/app/javascript/components/record-form/form/components/workflow-indicator.jsx
index b9bb61dfa5..ddd8c261f0 100644
--- a/app/javascript/components/record-form/form/components/workflow-indicator.jsx
+++ b/app/javascript/components/record-form/form/components/workflow-indicator.jsx
@@ -12,7 +12,7 @@ import { displayNameHelper, useMemoizedSelector } from "../../../../libs";
 import css from "./styles.css";
 import { WORKFLOW_INDICATOR_NAME, CLOSED } from "./constants";
 
-const WorkflowIndicator = ({ locale, primeroModule, recordType, record }) => {
+function WorkflowIndicator({ locale, primeroModule, recordType, record }) {
   const mobileDisplay = useMediaQuery(theme => theme.breakpoints.down("sm"));
 
   const workflowLabels = useMemoizedSelector(state =>
@@ -56,7 +56,7 @@ const WorkflowIndicator = ({ locale, primeroModule, recordType, record }) => {
       })}
     </Stepper>
   );
-};
+}
 
 WorkflowIndicator.displayName = WORKFLOW_INDICATOR_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/attachment-field.jsx b/app/javascript/components/record-form/form/field-types/attachments/attachment-field.jsx
index b2e74b8aba..ee754e5328 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/attachment-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/attachment-field.jsx
@@ -16,7 +16,7 @@ import { buildAttachmentFieldsObject, buildBase64URL } from "./utils";
 import AttachmentInput from "./attachment-input";
 import AttachmentPreview from "./attachment-preview";
 
-const AttachmentField = ({ name, index, attachment, disabled, mode, arrayHelpers, value }) => {
+function AttachmentField({ name, index, attachment, disabled, mode, arrayHelpers, value }) {
   const i18n = useI18n();
   const [open, setOpen] = useState(false);
 
@@ -97,7 +97,7 @@ const AttachmentField = ({ name, index, attachment, disabled, mode, arrayHelpers
       </Box>
     </div>
   );
-};
+}
 
 AttachmentField.displayName = "AttachmentField";
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/attachment-input.jsx b/app/javascript/components/record-form/form/field-types/attachments/attachment-input.jsx
index f17c2e09f2..8342009c61 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/attachment-input.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/attachment-input.jsx
@@ -15,7 +15,7 @@ import { enqueueSnackbar, SNACKBAR_VARIANTS } from "../../../../notifier";
 import { ATTACHMENT_TYPES, ATTACHMENT_ACCEPTED_TYPES } from "./constants";
 import renderPreview from "./render-preview";
 
-const AttachmentInput = ({ attachment, fields, name, value, deleteButton }) => {
+function AttachmentInput({ attachment, fields, name, value, deleteButton }) {
   const dispatch = useDispatch();
 
   const [file, setFile] = useState({
@@ -106,7 +106,7 @@ const AttachmentInput = ({ attachment, fields, name, value, deleteButton }) => {
       {file && renderPreview(attachment, file, css, deleteButton)}
     </div>
   );
-};
+}
 
 AttachmentInput.displayName = "AttachmentInput";
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/attachment-label.jsx b/app/javascript/components/record-form/form/field-types/attachments/attachment-label.jsx
index 2b86116879..7d8e97868c 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/attachment-label.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/attachment-label.jsx
@@ -8,7 +8,7 @@ import css from "../../styles.css";
 import ActionButton from "../../../../action-button";
 import { ACTION_BUTTON_TYPES } from "../../../../action-button/constants";
 
-const AttachmentLabel = ({ label, helpText, disabled, mode, arrayHelpers, handleAttachmentAddition, error }) => {
+function AttachmentLabel({ label, helpText, disabled, mode, arrayHelpers, handleAttachmentAddition, error }) {
   const isDisabled = !disabled && !mode.isShow;
   const onClick = () => handleAttachmentAddition(arrayHelpers);
 
@@ -35,7 +35,7 @@ const AttachmentLabel = ({ label, helpText, disabled, mode, arrayHelpers, handle
       )}
     </div>
   );
-};
+}
 
 AttachmentLabel.displayName = "AttachmentLabel";
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/attachment-preview.jsx b/app/javascript/components/record-form/form/field-types/attachments/attachment-preview.jsx
index 111309e9c5..0dd29ac00e 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/attachment-preview.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/attachment-preview.jsx
@@ -7,7 +7,7 @@ import css from "../../styles.css";
 
 import { ATTACHMENT_TYPES } from "./constants";
 
-const AttachmentPreview = ({ name, attachment, attachmentUrl }) => {
+function AttachmentPreview({ name, attachment, attachmentUrl }) {
   const isAudioAttachment = attachment === ATTACHMENT_TYPES.audio;
 
   useEffect(() => {
@@ -27,7 +27,7 @@ const AttachmentPreview = ({ name, attachment, attachmentUrl }) => {
   }
 
   return <img data-testid="attachment" src={attachmentUrl} alt="" className={css.editImg} />;
-};
+}
 
 AttachmentPreview.displayName = "AttachmentPreview";
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/component.jsx b/app/javascript/components/record-form/form/field-types/attachments/component.jsx
index b037181baa..0354c733f6 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/component.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/component.jsx
@@ -23,7 +23,7 @@ import PhotoArray from "./photo-array";
 import { buildBase64URL } from "./utils";
 
 // TODO: No link to display / download upload
-const Component = ({ name, field, label, disabled, formik, mode, recordType, helperText }) => {
+function Component({ name, field, label, disabled, formik, mode, recordType, helperText }) {
   const i18n = useI18n();
 
   const loading = useMemoizedSelector(state => getLoadingRecordState(state, recordType));
@@ -143,7 +143,7 @@ const Component = ({ name, field, label, disabled, formik, mode, recordType, hel
       )}
     </FieldArray>
   );
-};
+}
 
 Component.displayName = ATTACHMENT_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/document-field.jsx b/app/javascript/components/record-form/form/field-types/attachments/document-field.jsx
index e1890d0a64..49792067ba 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/document-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/document-field.jsx
@@ -28,7 +28,7 @@ import { MODULES } from "../../../../../config";
 import { buildAttachmentFieldsObject } from "./utils";
 import AttachmentInput from "./attachment-input";
 
-const DocumentField = ({
+function DocumentField({
   attachment,
   title,
   name,
@@ -39,7 +39,7 @@ const DocumentField = ({
   value,
   arrayHelpers,
   field
-}) => {
+}) {
   const i18n = useI18n();
   const params = useParams();
 
@@ -222,7 +222,7 @@ const DocumentField = ({
       />
     </>
   );
-};
+}
 
 DocumentField.displayName = DOCUMENT_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/photo-array.jsx b/app/javascript/components/record-form/form/field-types/attachments/photo-array.jsx
index a37bb06b7b..b976e920f5 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/photo-array.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/photo-array.jsx
@@ -10,7 +10,7 @@ import clsx from "clsx";
 
 import css from "../../styles.css";
 
-const PhotoArray = ({ images = [], isGallery = false }) => {
+function PhotoArray({ images = [], isGallery = false }) {
   const [selected, setSelected] = useState({ index: 0, open: false });
 
   const handleToggle = index => {
@@ -88,7 +88,7 @@ const PhotoArray = ({ images = [], isGallery = false }) => {
       </Backdrop>
     </>
   );
-};
+}
 
 PhotoArray.displayName = "PhotoArray";
 
diff --git a/app/javascript/components/record-form/form/field-types/attachments/render-preview.jsx b/app/javascript/components/record-form/form/field-types/attachments/render-preview.jsx
index 4769c94eb1..b91bad78e6 100644
--- a/app/javascript/components/record-form/form/field-types/attachments/render-preview.jsx
+++ b/app/javascript/components/record-form/form/field-types/attachments/render-preview.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import AttachmentPreview from "./attachment-preview";
 import { ATTACHMENT_TYPES } from "./constants";
diff --git a/app/javascript/components/record-form/form/field-types/date-field-picker.jsx b/app/javascript/components/record-form/form/field-types/date-field-picker.jsx
index 1ab9380948..1cd729a4a7 100644
--- a/app/javascript/components/record-form/form/field-types/date-field-picker.jsx
+++ b/app/javascript/components/record-form/form/field-types/date-field-picker.jsx
@@ -10,14 +10,14 @@ import { displayNameHelper } from "../../../../libs";
 import { LOCALE_KEYS } from "../../../../config";
 import NepaliCalendar from "../../../nepali-calendar-input";
 
-const DateFieldPicker = ({
+function DateFieldPicker({
   dateIncludeTime = false,
   dateProps,
   displayName,
   fieldTouched = false,
   fieldError,
   helperText
-}) => {
+}) {
   const i18n = useI18n();
   const helpText =
     (fieldTouched && fieldError) ||
@@ -66,7 +66,7 @@ const DateFieldPicker = ({
       )}
     </LocalizationProvider>
   );
-};
+}
 
 DateFieldPicker.displayName = "DateFieldPicker";
 
diff --git a/app/javascript/components/record-form/form/field-types/date-field.jsx b/app/javascript/components/record-form/form/field-types/date-field.jsx
index 5d074124c2..b0579d35aa 100644
--- a/app/javascript/components/record-form/form/field-types/date-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/date-field.jsx
@@ -16,7 +16,7 @@ import { NOT_FUTURE_DATE } from "../../constants";
 
 import DateFieldPicker from "./date-field-picker";
 
-const DateField = ({ displayName, name, helperText, mode, formik, InputProps, formSection, ...rest }) => {
+function DateField({ displayName, name, helperText, mode, formik, InputProps, formSection, ...rest }) {
   const fieldValue = useRef(null);
   const formInstance = useRef();
 
@@ -134,7 +134,7 @@ const DateField = ({ displayName, name, helperText, mode, formik, InputProps, fo
       }}
     </FastField>
   );
-};
+}
 
 DateField.displayName = DATE_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/link-to-form.jsx b/app/javascript/components/record-form/form/field-types/link-to-form.jsx
index 6e8024531f..e48e25e3c9 100644
--- a/app/javascript/components/record-form/form/field-types/link-to-form.jsx
+++ b/app/javascript/components/record-form/form/field-types/link-to-form.jsx
@@ -7,7 +7,7 @@ import { useDispatch } from "react-redux";
 import ActionButton, { ACTION_BUTTON_TYPES } from "../../../action-button";
 import { setSelectedForm } from "../../action-creators";
 
-const LinkToForm = ({ label, linkToForm }) => {
+function LinkToForm({ label, linkToForm }) {
   const dispatch = useDispatch();
   const onClick = () => dispatch(setSelectedForm(linkToForm));
 
@@ -26,7 +26,7 @@ const LinkToForm = ({ label, linkToForm }) => {
       }}
     />
   );
-};
+}
 
 LinkToForm.displayName = "LinkToForm";
 
diff --git a/app/javascript/components/record-form/form/field-types/radio-field.jsx b/app/javascript/components/record-form/form/field-types/radio-field.jsx
index 870f4470f8..75b15a1187 100644
--- a/app/javascript/components/record-form/form/field-types/radio-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/radio-field.jsx
@@ -16,7 +16,7 @@ import { RADIO_FIELD_NAME } from "../constants";
 import css from "../styles.css";
 import { useMemoizedSelector } from "../../../../libs";
 
-const RadioField = ({ name, helperText, label, disabled, field, formik, mode, ...rest }) => {
+function RadioField({ name, helperText, label, disabled, field, formik, mode, ...rest }) {
   const i18n = useI18n();
 
   const selectedValue = field.selected_value;
@@ -97,7 +97,7 @@ const RadioField = ({ name, helperText, label, disabled, field, formik, mode, ..
       <FormHelperText>{fieldError && fieldTouched ? fieldError : helperText}</FormHelperText>
     </FormControl>
   );
-};
+}
 
 RadioField.displayName = RADIO_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/select-field-container.jsx b/app/javascript/components/record-form/form/field-types/select-field-container.jsx
index 5ca02d147e..b9c2073eb8 100644
--- a/app/javascript/components/record-form/form/field-types/select-field-container.jsx
+++ b/app/javascript/components/record-form/form/field-types/select-field-container.jsx
@@ -26,7 +26,7 @@ import { OPTION_TYPES } from "../../../form";
 import useOptions from "../../../form/use-options";
 import { RECORD_TYPES } from "../../../../config";
 
-const SelectFieldContainer = ({
+function SelectFieldContainer({
   field,
   value,
   disabled,
@@ -44,7 +44,7 @@ const SelectFieldContainer = ({
   helperText,
   recordType,
   recordModuleID
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { online } = useApp();
@@ -252,7 +252,7 @@ const SelectFieldContainer = ({
       options={filteredOptions}
     />
   );
-};
+}
 
 SelectFieldContainer.displayName = "SelectFieldContainer";
 
diff --git a/app/javascript/components/record-form/form/field-types/select-field.jsx b/app/javascript/components/record-form/form/field-types/select-field.jsx
index d9f4fd65ac..ddf741ecec 100644
--- a/app/javascript/components/record-form/form/field-types/select-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/select-field.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../i18n";
 
 import SelectFieldContainer from "./select-field-container";
 
-const SelectField = ({
+function SelectField({
   name,
   field,
   label,
@@ -23,7 +23,7 @@ const SelectField = ({
   recordModuleID,
   recordType,
   tags
-}) => {
+}) {
   const i18n = useI18n();
 
   return (
@@ -53,7 +53,7 @@ const SelectField = ({
       }}
     </FastField>
   );
-};
+}
 
 SelectField.displayName = SELECT_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/seperator.jsx b/app/javascript/components/record-form/form/field-types/seperator.jsx
index 7d502cd9f7..e7aa355650 100644
--- a/app/javascript/components/record-form/form/field-types/seperator.jsx
+++ b/app/javascript/components/record-form/form/field-types/seperator.jsx
@@ -7,7 +7,7 @@ import { FormHelperText } from "@mui/material";
 import { SEPERATOR_NAME } from "../constants";
 import css from "../styles.css";
 
-const Seperator = ({ helperText, label, mode }) => {
+function Seperator({ helperText, label, mode }) {
   return (
     <div className={css.seperator}>
       <div className={css.separatorTitle}>
@@ -16,7 +16,7 @@ const Seperator = ({ helperText, label, mode }) => {
       {(mode.isEdit || mode.isNew) && helperText && <FormHelperText>{helperText}</FormHelperText>}
     </div>
   );
-};
+}
 
 Seperator.displayName = SEPERATOR_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/tally-field-container.jsx b/app/javascript/components/record-form/form/field-types/tally-field-container.jsx
index dff7c16f01..f9605a3764 100644
--- a/app/javascript/components/record-form/form/field-types/tally-field-container.jsx
+++ b/app/javascript/components/record-form/form/field-types/tally-field-container.jsx
@@ -10,7 +10,7 @@ import css from "../styles.css";
 
 import TextField from "./text-field";
 
-const TallyFieldContainer = ({ name, option, isTotal, ...rest }) => {
+function TallyFieldContainer({ name, option, isTotal, ...rest }) {
   const i18n = useI18n();
 
   if (!isTotal && !option) {
@@ -37,7 +37,7 @@ const TallyFieldContainer = ({ name, option, isTotal, ...rest }) => {
   };
 
   return <TextField {...fieldProps} />;
-};
+}
 
 TallyFieldContainer.displayName = TALLY_FIELD_CONTAINER_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/tally-field.jsx b/app/javascript/components/record-form/form/field-types/tally-field.jsx
index 3e37d9c4fa..d07e90ce1c 100644
--- a/app/javascript/components/record-form/form/field-types/tally-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/tally-field.jsx
@@ -12,7 +12,7 @@ import { buildTallyErrors } from "../utils";
 import TallyFieldContainer from "./tally-field-container";
 import css from "./styles.css";
 
-const TallyField = ({ name, formik, field, helperText, InputLabelProps, label, mode, ...rest }) => {
+function TallyField({ name, formik, field, helperText, InputLabelProps, label, mode, ...rest }) {
   const totalName = `${name}.total`;
   const tallyValues = compact(field.tally.map(option => getIn(formik.values, [name, option.id])));
   const errors = getIn(formik.errors, name);
@@ -43,7 +43,7 @@ const TallyField = ({ name, formik, field, helperText, InputLabelProps, label, m
       <FormHelperText {...renderErrorOnHelperText}>{renderError || helperText}</FormHelperText>
     </div>
   );
-};
+}
 
 TallyField.displayName = TALLY_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/text-field.jsx b/app/javascript/components/record-form/form/field-types/text-field.jsx
index 50a279f1c9..4d75093dd7 100644
--- a/app/javascript/components/record-form/form/field-types/text-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/text-field.jsx
@@ -24,7 +24,7 @@ import { shouldFieldUpdate } from "../utils";
 
 import css from "./styles.css";
 
-const TextField = ({ name, field, formik, mode, recordType, recordID, formSection, ...rest }) => {
+function TextField({ name, field, formik, mode, recordType, recordID, formSection, ...rest }) {
   const { type } = field;
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -110,7 +110,7 @@ const TextField = ({ name, field, formik, mode, recordType, recordID, formSectio
       }}
     </FastField>
   );
-};
+}
 
 TextField.displayName = TEXT_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/field-types/tick-field.jsx b/app/javascript/components/record-form/form/field-types/tick-field.jsx
index 563f61d2d5..6a85edf840 100644
--- a/app/javascript/components/record-form/form/field-types/tick-field.jsx
+++ b/app/javascript/components/record-form/form/field-types/tick-field.jsx
@@ -12,7 +12,7 @@ import { TICK_FIELD_NAME } from "../constants";
 import { useI18n } from "../../../i18n";
 import css from "../styles.css";
 
-const TickField = ({ helperText, name, label, tickBoxlabel, formik, disabled = false, ...rest }) => {
+function TickField({ helperText, name, label, tickBoxlabel, formik, disabled = false, ...rest }) {
   const i18n = useI18n();
 
   const fieldProps = {
@@ -51,7 +51,7 @@ const TickField = ({ helperText, name, label, tickBoxlabel, formik, disabled = f
       {displayHelperText}
     </FormControl>
   );
-};
+}
 
 TickField.displayName = TICK_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/form-section-field.jsx b/app/javascript/components/record-form/form/form-section-field.jsx
index 4d5974cb01..f09b383995 100644
--- a/app/javascript/components/record-form/form/form-section-field.jsx
+++ b/app/javascript/components/record-form/form/form-section-field.jsx
@@ -38,7 +38,7 @@ import TallyField from "./field-types/tally-field";
 import css from "./styles.css";
 import { asyncFieldOffline } from "./utils";
 
-const FormSectionField = ({
+function FormSectionField({
   name,
   field,
   mode,
@@ -51,7 +51,7 @@ const FormSectionField = ({
   isReadWriteForm,
   violationOptions,
   tags
-}) => {
+}) {
   const i18n = useI18n();
   const { online } = useApp();
   const {
@@ -164,7 +164,7 @@ const FormSectionField = ({
       </div>
     </ConditionalWrapper>
   );
-};
+}
 
 FormSectionField.displayName = FORM_SECTION_FIELD_NAME;
 
diff --git a/app/javascript/components/record-form/form/formik-form.jsx b/app/javascript/components/record-form/form/formik-form.jsx
index ef9a0e2e77..646e3ab0bb 100644
--- a/app/javascript/components/record-form/form/formik-form.jsx
+++ b/app/javascript/components/record-form/form/formik-form.jsx
@@ -11,7 +11,7 @@ import { useI18n } from "../../i18n";
 import { ValidationErrors } from "./components";
 import css from "./styles.css";
 
-const FormikForm = ({
+function FormikForm({
   handleSubmit,
   errors,
   isSubmitting,
@@ -32,7 +32,7 @@ const FormikForm = ({
   handleConfirm,
   externalComponents,
   submitCount
-}) => {
+}) {
   const i18n = useI18n();
 
   useEffect(() => {
@@ -64,7 +64,7 @@ const FormikForm = ({
       <div className={css.spacer} />
     </Form>
   );
-};
+}
 
 FormikForm.displayName = "Form";
 
diff --git a/app/javascript/components/record-form/form/page-heading.jsx b/app/javascript/components/record-form/form/page-heading.jsx
index 4c0923f9e7..7676cb3661 100644
--- a/app/javascript/components/record-form/form/page-heading.jsx
+++ b/app/javascript/components/record-form/form/page-heading.jsx
@@ -9,7 +9,7 @@ import { RECORD_PATH } from "../../../config";
 import { RECORD_FORM_TOOLBAR_PAGE_HEADING_NAME } from "./constants";
 import { SyncRecord } from "./components";
 
-const Component = ({
+function Component({
   i18n,
   mode,
   params,
@@ -23,7 +23,7 @@ const Component = ({
   isEnabledWebhookSyncFor,
   syncedAt,
   syncStatus
-}) => {
+}) {
   let heading = "";
 
   if (mode.isNew) {
@@ -65,7 +65,7 @@ const Component = ({
       {syncRecord}
     </>
   );
-};
+}
 
 Component.displayName = RECORD_FORM_TOOLBAR_PAGE_HEADING_NAME;
 
diff --git a/app/javascript/components/record-form/form/record-form-title.jsx b/app/javascript/components/record-form/form/record-form-title.jsx
index 59bdedc56f..edd0bed98a 100644
--- a/app/javascript/components/record-form/form/record-form-title.jsx
+++ b/app/javascript/components/record-form/form/record-form-title.jsx
@@ -6,7 +6,7 @@ import PropTypes from "prop-types";
 
 import css from "./styles.css";
 
-const RecordFormTitle = ({ displayText, handleToggleNav, mobileDisplay }) => {
+function RecordFormTitle({ displayText, handleToggleNav, mobileDisplay }) {
   const showMobileIcon = mobileDisplay ? (
     <IconButton size="large" onClick={handleToggleNav} data-testid="icon-button">
       <MenuOpen data-testid="menu-open" />
@@ -21,7 +21,7 @@ const RecordFormTitle = ({ displayText, handleToggleNav, mobileDisplay }) => {
       </div>
     </>
   );
-};
+}
 
 RecordFormTitle.displayName = "RecordFormTitle";
 
diff --git a/app/javascript/components/record-form/form/record-form-toolbar.jsx b/app/javascript/components/record-form/form/record-form-toolbar.jsx
index 405bb57d4b..cba1640894 100644
--- a/app/javascript/components/record-form/form/record-form-toolbar.jsx
+++ b/app/javascript/components/record-form/form/record-form-toolbar.jsx
@@ -32,7 +32,7 @@ import css from "./styles.css";
 import RecordPageHeading from "./page-heading";
 import DisabledRecordIndicator from "./components/disabled-record-indicator";
 
-const RecordFormToolbar = ({
+function RecordFormToolbar({
   handleFormSubmit,
   caseIdDisplay,
   history,
@@ -42,7 +42,7 @@ const RecordFormToolbar = ({
   record,
   recordType,
   shortId
-}) => {
+}) {
   const { isRTL } = useThemeHelper();
   const dispatch = useDispatch();
   const i18n = useI18n();
@@ -186,7 +186,7 @@ const RecordFormToolbar = ({
       </>
     </PageHeading>
   );
-};
+}
 
 RecordFormToolbar.displayName = RECORD_FORM_TOOLBAR_NAME;
 
diff --git a/app/javascript/components/record-form/form/record-form.jsx b/app/javascript/components/record-form/form/record-form.jsx
index 3dfce88891..f8a7775df5 100644
--- a/app/javascript/components/record-form/form/record-form.jsx
+++ b/app/javascript/components/record-form/form/record-form.jsx
@@ -23,7 +23,7 @@ import { RECORD_FORM_NAME } from "./constants";
 import { fieldValidations } from "./validations";
 import FormikForm from "./formik-form";
 
-const RecordForm = ({
+function RecordForm({
   attachmentForms,
   bindSubmitForm,
   forms,
@@ -41,7 +41,7 @@ const RecordForm = ({
   externalComponents,
   primeroModule,
   setFormikValuesForNav
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { online, maximumttachmentsPerRecord } = useApp();
@@ -246,7 +246,7 @@ const RecordForm = ({
   }
 
   return null;
-};
+}
 
 RecordForm.displayName = RECORD_FORM_NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/services-subform/component.jsx b/app/javascript/components/record-form/form/subforms/services-subform/component.jsx
index 14c9a2876a..0f426fd499 100644
--- a/app/javascript/components/record-form/form/subforms/services-subform/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/services-subform/component.jsx
@@ -6,7 +6,7 @@ import { getIn, connect } from "formik";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   formik,
   field,
   index,
@@ -18,7 +18,7 @@ const Component = ({
   recordType,
   values,
   SubformDialogFields
-}) => {
+}) {
   const [filterState, setFilterState] = useState({
     filtersChanged: false,
     userIsSelected: false
@@ -65,7 +65,7 @@ const Component = ({
       values={values}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-add-entry/component.jsx b/app/javascript/components/record-form/form/subforms/subform-add-entry/component.jsx
index 63d14745f9..ddadaf6aaf 100644
--- a/app/javascript/components/record-form/form/subforms/subform-add-entry/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-add-entry/component.jsx
@@ -15,7 +15,7 @@ import css from "../styles.css";
 
 import { NAME, NEW } from "./constants";
 
-const Component = ({
+function Component({
   arrayHelpers,
   field,
   formik,
@@ -28,7 +28,7 @@ const Component = ({
   setDialogIsNew,
   parentTitle,
   parentValues
-}) => {
+}) {
   const i18n = useI18n();
   const [anchorEl, setAnchorEl] = useState(null);
   const { mobileDisplay } = useThemeHelper();
@@ -119,7 +119,7 @@ const Component = ({
       )}
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-chip/component.jsx b/app/javascript/components/record-form/form/subforms/subform-chip/component.jsx
index 07ffda142f..243e88244a 100644
--- a/app/javascript/components/record-form/form/subforms/subform-chip/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-chip/component.jsx
@@ -7,11 +7,11 @@ import { Chip } from "@mui/material";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ label, type = "info", ...rest }) => {
+function Component({ label, type = "info", ...rest }) {
   const classes = clsx({ [css.subformChip]: true, [css[type]]: true });
 
   return <Chip data-testid="chip" className={classes} label={label} {...rest} />;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-dialog-fields/component.jsx b/app/javascript/components/record-form/form/subforms/subform-dialog-fields/component.jsx
index 6a1a743b52..7b5ac650ad 100644
--- a/app/javascript/components/record-form/form/subforms/subform-dialog-fields/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-dialog-fields/component.jsx
@@ -17,7 +17,7 @@ import getDisplayConditions from "../../utils/get-display-conditions";
 
 import { NAME, VIOLATION_IDS_NAME } from "./constants";
 
-const Component = ({
+function Component({
   mode,
   index,
   filterFunc,
@@ -36,7 +36,7 @@ const Component = ({
   setFieldValue,
   values,
   components
-}) => {
+}) {
   const i18n = useI18n();
   const { subform_section_configuration: subformSectionConfiguration } = field;
 
@@ -151,7 +151,7 @@ const Component = ({
       </div>
     );
   });
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx b/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx
index 029cbd211a..a26121faf6 100644
--- a/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx
@@ -33,7 +33,7 @@ import {
 import { useMemoizedSelector } from "../../../../../libs";
 import { RECORD_TYPES_PLURAL } from "../../../../../config";
 
-const Component = ({
+function Component({
   arrayHelpers,
   dialogIsNew,
   field,
@@ -58,7 +58,7 @@ const Component = ({
   isViolationAssociation,
   violationOptions,
   components
-}) => {
+}) {
   const { online } = useApp();
   const params = useParams();
   const dispatch = useDispatch();
@@ -315,7 +315,7 @@ const Component = ({
       <ActionDialog {...modalConfirmationProps} />
     </>
   );
-};
+}
 
 Component.displayName = SUBFORM_DIALOG;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-drawer-actions/component.jsx b/app/javascript/components/record-form/form/subforms/subform-drawer-actions/component.jsx
index 4d36a42a07..865b696c25 100644
--- a/app/javascript/components/record-form/form/subforms/subform-drawer-actions/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-drawer-actions/component.jsx
@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
 
 import { NAME } from "./constants";
 
-const Component = ({ showActions, editActions, isShow }) => {
+function Component({ showActions, editActions, isShow }) {
   if (isShow) {
     return showActions;
   }
 
   return editActions;
-};
+}
 
 Component.propTypes = {
   editActions: PropTypes.node,
diff --git a/app/javascript/components/record-form/form/subforms/subform-drawer/component.jsx b/app/javascript/components/record-form/form/subforms/subform-drawer/component.jsx
index b001785a7c..58d426dd24 100644
--- a/app/javascript/components/record-form/form/subforms/subform-drawer/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-drawer/component.jsx
@@ -10,7 +10,7 @@ import { ACTION_BUTTON_TYPES } from "../../../../action-button/constants";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ open, cancelHandler, children, title }) => {
+function Component({ open, cancelHandler, children, title }) {
   return (
     <Drawer
       data-testid="drawer"
@@ -39,7 +39,7 @@ const Component = ({ open, cancelHandler, children, title }) => {
       </div>
     </Drawer>
   );
-};
+}
 
 Component.propTypes = {
   cancelHandler: PropTypes.func,
diff --git a/app/javascript/components/record-form/form/subforms/subform-empty-data/component.jsx b/app/javascript/components/record-form/form/subforms/subform-empty-data/component.jsx
index 59d56a62b8..a289a46717 100644
--- a/app/javascript/components/record-form/form/subforms/subform-empty-data/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-empty-data/component.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../../../../i18n";
 
 import { NAME } from "./constants";
 
-const Component = ({ subformName, single = false }) => {
+function Component({ subformName, single = false }) {
   const i18n = useI18n();
 
   return (
@@ -20,7 +20,7 @@ const Component = ({ subformName, single = false }) => {
       </span>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-errors/component.jsx b/app/javascript/components/record-form/form/subforms/subform-errors/component.jsx
index 9cefc3e903..c149dd2ab0 100644
--- a/app/javascript/components/record-form/form/subforms/subform-errors/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-errors/component.jsx
@@ -8,7 +8,7 @@ import isEmpty from "lodash/isEmpty";
 import { useI18n } from "../../../../i18n";
 import InternalAlert from "../../../../internal-alert";
 
-const Component = ({ initialErrors, errors, setErrors, setTouched }) => {
+function Component({ initialErrors, errors, setErrors, setTouched }) {
   const i18n = useI18n();
 
   const errorMessages = Object.entries(isEmpty(errors) ? initialErrors || {} : errors).map(([, value]) => ({
@@ -35,7 +35,7 @@ const Component = ({ initialErrors, errors, setErrors, setTouched }) => {
       severity="error"
     />
   ) : null;
-};
+}
 
 Component.displayName = "SubformErrors";
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-field-array/component.jsx b/app/javascript/components/record-form/form/subforms/subform-field-array/component.jsx
index c19f28fac4..8a5854db18 100644
--- a/app/javascript/components/record-form/form/subforms/subform-field-array/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-field-array/component.jsx
@@ -17,7 +17,7 @@ import { GuidingQuestions } from "../../components";
 
 import { isEmptyOrAllDestroyed, isTracesSubform } from "./utils";
 
-const Component = ({
+function Component({
   arrayHelpers,
   field,
   formik,
@@ -36,7 +36,7 @@ const Component = ({
   entryFilter = false,
   customTitle = false,
   components
-}) => {
+}) {
   const {
     display_name: displayName,
     name,
@@ -166,7 +166,7 @@ const Component = ({
       />
     </div>
   );
-};
+}
 
 Component.displayName = SUBFORM_FIELD_ARRAY;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-field-subform/component.jsx b/app/javascript/components/record-form/form/subforms/subform-field-subform/component.jsx
index 919a35611d..cb075dfdaa 100644
--- a/app/javascript/components/record-form/form/subforms/subform-field-subform/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-field-subform/component.jsx
@@ -11,7 +11,7 @@ import { useI18n } from "../../../../i18n";
 
 import { EXPANDED } from "./constants";
 
-const Component = ({ isViolation, parentTitle, parentValues, fieldProps, violationOptions, components }) => {
+function Component({ isViolation, parentTitle, parentValues, fieldProps, violationOptions, components }) {
   const i18n = useI18n();
 
   const { field: subformSectionField } = fieldProps;
@@ -62,7 +62,7 @@ const Component = ({ isViolation, parentTitle, parentValues, fieldProps, violati
       </Accordion>
     </div>
   );
-};
+}
 
 Component.displayName = SUBFORM_FIELD_SUBFORM;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-fields/component.jsx b/app/javascript/components/record-form/form/subforms/subform-fields/component.jsx
index 8aaf203e9b..7af1c289e4 100644
--- a/app/javascript/components/record-form/form/subforms/subform-fields/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-fields/component.jsx
@@ -26,7 +26,7 @@ import css from "../styles.css";
 
 import { TracingRequestStatus } from "./components";
 
-const Component = ({
+function Component({
   arrayHelpers,
   field,
   isTracesSubform,
@@ -44,7 +44,7 @@ const Component = ({
   isFamilyMember,
   isFamilyDetail,
   isReadWriteForm
-}) => {
+}) {
   const i18n = useI18n();
 
   const { isRTL } = useThemeHelper();
@@ -228,7 +228,7 @@ const Component = ({
   }
 
   return null;
-};
+}
 
 Component.displayName = SUBFORM_FIELDS;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-fields/components/tracing-request-status/component.jsx b/app/javascript/components/record-form/form/subforms/subform-fields/components/tracing-request-status/component.jsx
index 203ed5fc74..3a81a06fad 100644
--- a/app/javascript/components/record-form/form/subforms/subform-fields/components/tracing-request-status/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-fields/components/tracing-request-status/component.jsx
@@ -12,7 +12,7 @@ import useOptions from "../../../../../../form/use-options";
 
 import { NAME } from "./constants";
 
-const Component = ({ values }) => {
+function Component({ values }) {
   const i18n = useI18n();
 
   const tracingRequestStatus = useMemoizedSelector(state => getFieldByName(state, TRACING_REQUEST_STATUS_FIELD_NAME));
@@ -30,7 +30,7 @@ const Component = ({ values }) => {
       {values.tracing_request_status && <SubformChip label={status || values.tracing_request_status} />}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.jsx b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.jsx
index ac9f2b48c2..f4008122bb 100644
--- a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/component.jsx
@@ -20,7 +20,7 @@ import VerifySelect from "./select";
 import { getViolationTallyLabel } from "./utils";
 import { NAME } from "./constants";
 
-const Component = ({ fields, values, locale, displayName, index, collapsedFieldValues, mode }) => {
+function Component({ fields, values, locale, displayName, index, collapsedFieldValues, mode }) {
   const currentValues = values[index];
   const verifyParams = useParams();
   const i18n = useI18n();
@@ -168,7 +168,7 @@ const Component = ({ fields, values, locale, displayName, index, collapsedFieldV
       </ActionDialog>
     </ListItemText>
   );
-};
+}
 
 Component.propTypes = {
   collapsedFieldValues: PropTypes.node,
diff --git a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/select.jsx b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/select.jsx
index eca65d7a21..b0df7be6e5 100644
--- a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/select.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-item/select.jsx
@@ -18,7 +18,7 @@ const MENU_PROPS = {
   }
 };
 
-const Component = ({ selectedValue, setSelectedValue }) => {
+function Component({ selectedValue, setSelectedValue }) {
   const verificationStatus = useOptions({ source: LOOKUPS.verification_status });
   const classesFormCotnrol = { root: css.verifyFormControlRoot };
   const classesSelect = {
@@ -55,7 +55,7 @@ const Component = ({ selectedValue, setSelectedValue }) => {
       </FormControl>
     </div>
   );
-};
+}
 
 Component.propTypes = {
   selectedValue: PropTypes.string,
diff --git a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/component.jsx b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/component.jsx
index bb3584a315..41a25e2151 100644
--- a/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-fields/components/violation-title/component.jsx
@@ -11,7 +11,7 @@ import { getVerifiedValue } from "./utils";
 import { NAME, VIOLATION_STATUS } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ title, values, fields }) => {
+function Component({ title, values, fields }) {
   const shortUniqueId = getShortIdFromUniqueId(values?.unique_id);
   const violationVerifiedField = fields.find(field => field.name === VIOLATION_STATUS);
   const optionsStrings = useOptions({ source: violationVerifiedField?.option_strings_source });
@@ -29,7 +29,7 @@ const Component = ({ title, values, fields }) => {
       <div>{renderChipStatus}</div>
     </div>
   );
-};
+}
 
 Component.propTypes = {
   fields: PropTypes.array.isRequired,
diff --git a/app/javascript/components/record-form/form/subforms/subform-header-date/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header-date/component.jsx
index f947e15e98..57737a880c 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header-date/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header-date/component.jsx
@@ -10,7 +10,7 @@ import NepaliCalendar from "../../../../nepali-calendar-input";
 
 import css from "./styles.css";
 
-const Component = ({ value, includeTime }) => {
+function Component({ value, includeTime }) {
   const i18n = useI18n();
 
   if (isEmpty(value)) return value || "";
@@ -33,7 +33,7 @@ const Component = ({ value, includeTime }) => {
   }
 
   return <span data-testid="date-header">{dateValue}</span>;
-};
+}
 
 Component.displayName = SUBFORM_HEADER_DATE;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-header-lookup/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header-lookup/component.jsx
index 1b82a9a27d..107287eae4 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header-lookup/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header-lookup/component.jsx
@@ -12,7 +12,7 @@ import { getShortIdFromUniqueId } from "../../../../records/utils";
 
 import { getMultiSelectValues, buildAssociatedViolationsLabels } from "./utils";
 
-const Component = ({
+function Component({
   value = "",
   optionsStringSource,
   optionsStringText,
@@ -20,7 +20,7 @@ const Component = ({
   displayName,
   associatedViolations,
   parentTitle
-}) => {
+}) {
   const i18n = useI18n();
   const optionSource =
     optionsStringSource === CUSTOM_STRINGS_SOURCE.user ? OPTION_TYPES.REFER_TO_USERS : optionsStringSource;
@@ -81,7 +81,7 @@ const Component = ({
       {displayText[i18n.locale]}
     </span>
   );
-};
+}
 
 Component.displayName = SUBFORM_LOOKUP_HEADER_NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-header-tally/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header-tally/component.jsx
index cd583452df..fdad99fbc3 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header-tally/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header-tally/component.jsx
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 
 import { displayNameHelper } from "../../../../../libs";
 
-const Component = ({ value, displayName, locale }) => {
+function Component({ value, displayName, locale }) {
   if (!value) {
     return null;
   }
@@ -16,7 +16,7 @@ const Component = ({ value, displayName, locale }) => {
       </span>
     </>
   );
-};
+}
 
 Component.displayName = "SubformHeaderTally";
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-header-tickbox/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header-tickbox/component.jsx
index 933a060979..ee148503c8 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header-tickbox/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header-tickbox/component.jsx
@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { useI18n } from "../../../../i18n";
 import { SUBFORM_HEADER_TICKBOX } from "../constants";
 
-const Component = ({ value, tickBoxLabel }) => {
+function Component({ value, tickBoxLabel }) {
   const i18n = useI18n();
 
   if (!value) return value || "";
@@ -13,7 +13,7 @@ const Component = ({ value, tickBoxLabel }) => {
   const renderValue = tickBoxLabel[i18n.locale] || i18n.t("yes_label");
 
   return <span>{renderValue}</span>;
-};
+}
 
 Component.displayName = SUBFORM_HEADER_TICKBOX;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-header/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header/component.jsx
index e18558219b..a8b6ad929b 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header/component.jsx
@@ -18,7 +18,7 @@ import { useI18n } from "../../../../i18n";
 
 import { ListItemTextSecondary } from "./components";
 
-const Component = ({
+function Component({
   field,
   values,
   locale,
@@ -29,7 +29,7 @@ const Component = ({
   renderSecondaryText = false,
   parentTitle,
   mode
-}) => {
+}) {
   const i18n = useI18n();
   const { collapsed_field_names: collapsedFieldNames, fields } = field.subform_section_id;
   const itemClasses = { primary: css.listText };
@@ -132,7 +132,7 @@ const Component = ({
   }
 
   return <ListItemText classes={itemClasses}>{displayName?.[locale]}</ListItemText>;
-};
+}
 
 Component.displayName = SUBFORM_HEADER;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-header/components/list-item-text-secondary/component.jsx b/app/javascript/components/record-form/form/subforms/subform-header/components/list-item-text-secondary/component.jsx
index 2dbc0adda5..ee2c18290e 100644
--- a/app/javascript/components/record-form/form/subforms/subform-header/components/list-item-text-secondary/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-header/components/list-item-text-secondary/component.jsx
@@ -9,7 +9,7 @@ import { NAME } from "./constants";
 import css from "./styles.css";
 import { buildAssociatedViolationsKeys } from "./utils";
 
-const Component = ({ associatedViolations, violationsIDs, renderSecondaryText = false }) => {
+function Component({ associatedViolations, violationsIDs, renderSecondaryText = false }) {
   const i18n = useI18n();
 
   if (!renderSecondaryText || isEmpty(associatedViolations) || isEmpty(violationsIDs)) return null;
@@ -34,7 +34,7 @@ const Component = ({ associatedViolations, violationsIDs, renderSecondaryText =
       })}
     </div>
   );
-};
+}
 
 Component.propTypes = {
   associatedViolations: PropTypes.object,
diff --git a/app/javascript/components/record-form/form/subforms/subform-item/component.jsx b/app/javascript/components/record-form/form/subforms/subform-item/component.jsx
index 669c8eb469..d9b49b88e0 100644
--- a/app/javascript/components/record-form/form/subforms/subform-item/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-item/component.jsx
@@ -8,7 +8,7 @@ import SubformTraces from "../subform-traces";
 import { buildFormViolations } from "./utils";
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   arrayHelpers,
   dialogIsNew,
   field,
@@ -34,7 +34,7 @@ const Component = ({
   title,
   violationOptions,
   components
-}) => {
+}) {
   const i18n = useI18n();
   const handleClose = () => setOpen(false);
 
@@ -83,7 +83,7 @@ const Component = ({
       violationOptions={violationOptions}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-menu/component.jsx b/app/javascript/components/record-form/form/subforms/subform-menu/component.jsx
index 1f7bfb670b..1d250b3e73 100644
--- a/app/javascript/components/record-form/form/subforms/subform-menu/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-menu/component.jsx
@@ -21,7 +21,7 @@ import { useMemoizedSelector } from "../../../../../libs";
 import ReferAction from "./components/refer-action";
 import { NAME } from "./constants";
 
-const Component = ({ index, values }) => {
+function Component({ index, values }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -58,7 +58,7 @@ const Component = ({ index, values }) => {
       </Permission>
     </DisableOffline>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-menu/components/refer-action.js b/app/javascript/components/record-form/form/subforms/subform-menu/components/refer-action.js
index 37cb7da325..3460cf7a43 100644
--- a/app/javascript/components/record-form/form/subforms/subform-menu/components/refer-action.js
+++ b/app/javascript/components/record-form/form/subforms/subform-menu/components/refer-action.js
@@ -5,7 +5,7 @@ import { Button } from "@mui/material";
 
 import { useI18n } from "../../../../../i18n";
 
-const ReferAction = ({ index, handleReferral, values }) => {
+function ReferAction({ index, handleReferral, values }) {
   const i18n = useI18n();
   const id = `refer-option-${index}`;
 
@@ -22,7 +22,7 @@ const ReferAction = ({ index, handleReferral, values }) => {
       {values[index].service_status_referred ? i18n.t("buttons.referral_again") : i18n.t("buttons.referral")}
     </Button>
   );
-};
+}
 
 ReferAction.displayName = "ReferAction";
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/component.jsx
index 4d0b460318..557eb997d0 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/component.jsx
@@ -14,7 +14,7 @@ import SubformDrawer from "../subform-drawer";
 import { TraceComparisonForm, TraceForm, TraceMatches } from "./components";
 import { FORMS, NAME } from "./constants";
 
-const Component = ({ openDrawer, field, formik, formSection, handleClose, index, recordType, mode }) => {
+function Component({ openDrawer, field, formik, formSection, handleClose, index, recordType, mode }) {
   const i18n = useI18n();
   const [open, setOpen] = useState(openDrawer);
   const [selectedForm, setSelectedForm] = useState(FORMS.trace);
@@ -73,7 +73,7 @@ const Component = ({ openDrawer, field, formik, formSection, handleClose, index,
       <Form {...props} />
     </SubformDrawer>
   );
-};
+}
 
 Component.propTypes = {
   field: PropTypes.object.isRequired,
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/compared-forms/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/compared-forms/component.jsx
index afddadfd23..1b41ff82f8 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/compared-forms/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/compared-forms/component.jsx
@@ -7,7 +7,7 @@ import { Grid } from "@mui/material";
 import { useI18n } from "../../../../../../i18n";
 import FieldRows from "../field-rows/component";
 
-const ComparedForms = ({ forms }) => {
+function ComparedForms({ forms }) {
   const i18n = useI18n();
 
   return forms.map(({ form, comparisons, index }) => (
@@ -20,7 +20,7 @@ const ComparedForms = ({ forms }) => {
       <FieldRows comparisons={comparisons} />
     </Fragment>
   ));
-};
+}
 
 ComparedForms.propTypes = {
   forms: PropTypes.object
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/field-row/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/field-row/component.jsx
index e55405b978..852610aa16 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/field-row/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/field-row/component.jsx
@@ -13,7 +13,7 @@ import { isTextField, getValueLabel } from "./utils";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ field, traceValue, caseValue, match }) => {
+function Component({ field, traceValue, caseValue, match }) {
   const i18n = useI18n();
   const {
     display_name: displayName,
@@ -46,7 +46,7 @@ const Component = ({ field, traceValue, caseValue, match }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/field-rows/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/field-rows/component.jsx
index e8253f34be..341c683743 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/field-rows/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/field-rows/component.jsx
@@ -9,7 +9,7 @@ import FieldRow from "../field-row";
 
 import css from "./styles.css";
 
-const FieldRows = ({ comparisons }) => {
+function FieldRows({ comparisons }) {
   const i18n = useI18n();
 
   if (isEmpty(comparisons)) {
@@ -31,7 +31,7 @@ const FieldRows = ({ comparisons }) => {
       key={comparison.field.name}
     />
   ));
-};
+}
 
 FieldRows.propTypes = {
   comparisons: PropTypes.array
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-actions/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-actions/component.jsx
index 3c12b0124f..8efcf22457 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-actions/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-actions/component.jsx
@@ -16,7 +16,7 @@ import { useMemoizedSelector } from "../../../../../../../libs";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ handleBack, handleConfirm, hasMatch, recordType, selectedForm, mode }) => {
+function Component({ handleBack, handleConfirm, hasMatch, recordType, selectedForm, mode }) {
   const loading = useMemoizedSelector(state => getLoadingRecordState(state, recordType));
 
   return (
@@ -64,7 +64,7 @@ const Component = ({ handleBack, handleConfirm, hasMatch, recordType, selectedFo
       )}
     </div>
   );
-};
+}
 
 Component.propTypes = {
   handleBack: PropTypes.func,
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-comparison-form/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-comparison-form/component.jsx
index ea753ac832..370698b8d9 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-comparison-form/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-comparison-form/component.jsx
@@ -27,7 +27,7 @@ import { NAME, TOP_FIELD_NAMES } from "./constants";
 import { getComparisons, toAttachmentArray } from "./utils";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   selectedForm,
   recordType,
   potentialMatch,
@@ -36,7 +36,7 @@ const Component = ({
   hideFindMatch,
   hideBack,
   mode
-}) => {
+}) {
   const { id } = useParams();
   const dispatch = useDispatch();
   // eslint-disable-next-line camelcase
@@ -225,7 +225,7 @@ const Component = ({
       </Grid>
     </>
   );
-};
+}
 
 Component.propTypes = {
   hideBack: PropTypes.bool,
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-form/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-form/component.jsx
index 80e7232acb..dc953492a7 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-form/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-form/component.jsx
@@ -17,7 +17,7 @@ import { useI18n } from "../../../../../../i18n";
 
 import { NAME } from "./constants";
 
-const Component = ({ setSelectedForm, traceValues, formSection, recordType, selectedForm, handleClose, mode }) => {
+function Component({ setSelectedForm, traceValues, formSection, recordType, selectedForm, handleClose, mode }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const formMode = whichFormMode(MODES.show);
@@ -73,7 +73,7 @@ const Component = ({ setSelectedForm, traceValues, formSection, recordType, sele
       />
     </>
   );
-};
+}
 
 Component.propTypes = {
   formSection: PropTypes.object.isRequired,
diff --git a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-matches/component.jsx b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-matches/component.jsx
index cf17d8d3ed..e653f11ec9 100644
--- a/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-matches/component.jsx
+++ b/app/javascript/components/record-form/form/subforms/subform-traces/components/trace-matches/component.jsx
@@ -20,7 +20,7 @@ import useOptions from "../../../../../../form/use-options";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ tracingRequestValues, traceValues, recordType }) => {
+function Component({ tracingRequestValues, traceValues, recordType }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -117,7 +117,7 @@ const Component = ({ tracingRequestValues, traceValues, recordType }) => {
       <IndexTable {...tableOptions} />
     </>
   );
-};
+}
 
 Component.propTypes = {
   recordType: PropTypes.string.isRequired,
diff --git a/app/javascript/components/record-form/nav/component.jsx b/app/javascript/components/record-form/nav/component.jsx
index 20fe3e0350..a65d25d5c1 100644
--- a/app/javascript/components/record-form/nav/component.jsx
+++ b/app/javascript/components/record-form/nav/component.jsx
@@ -30,7 +30,7 @@ import css from "./styles.css";
 import CloseButtonNavBar from "./components/close-button-nav-bar";
 import FormGroup from "./components/form-groups";
 
-const Component = ({
+function Component({
   firstTab,
   formNav,
   hasForms,
@@ -45,7 +45,7 @@ const Component = ({
   primeroModule,
   selectedForm,
   formikValuesForNav
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const history = useHistory();
@@ -233,7 +233,7 @@ const Component = ({
       </ConditionalWrapper>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/nav/components/close-button-nav-bar.jsx b/app/javascript/components/record-form/nav/components/close-button-nav-bar.jsx
index de1c0e0c09..b0964b304d 100644
--- a/app/javascript/components/record-form/nav/components/close-button-nav-bar.jsx
+++ b/app/javascript/components/record-form/nav/components/close-button-nav-bar.jsx
@@ -6,7 +6,7 @@ import CloseIcon from "@mui/icons-material/Close";
 
 import css from "../styles.css";
 
-const CloseButtonNavBar = ({ handleToggleNav, mobileDisplay }) => {
+function CloseButtonNavBar({ handleToggleNav, mobileDisplay }) {
   if (!mobileDisplay) return false;
 
   return (
@@ -16,7 +16,7 @@ const CloseButtonNavBar = ({ handleToggleNav, mobileDisplay }) => {
       </IconButton>
     </div>
   );
-};
+}
 
 CloseButtonNavBar.displayName = "CloseButtonNavBar";
 
diff --git a/app/javascript/components/record-form/nav/components/form-groups.jsx b/app/javascript/components/record-form/nav/components/form-groups.jsx
index ad0a574c96..73f783dd63 100644
--- a/app/javascript/components/record-form/nav/components/form-groups.jsx
+++ b/app/javascript/components/record-form/nav/components/form-groups.jsx
@@ -6,7 +6,7 @@ import buildFormGroupData from "../utils";
 
 import NavGroup from "./nav-group";
 
-const FormGroup = ({
+function FormGroup({
   formGroup,
   formGroupLookup,
   formikValuesForNav,
@@ -16,7 +16,7 @@ const FormGroup = ({
   recordAlerts,
   selectedForm,
   validationErrors
-}) => {
+}) {
   const group = buildFormGroupData(formGroup, formikValuesForNav);
 
   if (!group.size) {
@@ -35,7 +35,7 @@ const FormGroup = ({
       formGroupLookup={formGroupLookup}
     />
   );
-};
+}
 
 FormGroup.displayName = "FormGroup";
 
diff --git a/app/javascript/components/record-form/nav/components/nav-group/component.jsx b/app/javascript/components/record-form/nav/components/nav-group/component.jsx
index bb4b05f91b..7c4a979b0e 100644
--- a/app/javascript/components/record-form/nav/components/nav-group/component.jsx
+++ b/app/javascript/components/record-form/nav/components/nav-group/component.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../../i18n";
 import { NAME } from "./constants";
 import { getFormGroupName } from "./utils";
 
-const Component = ({
+function Component({
   group,
   handleClick,
   isNew,
@@ -19,7 +19,7 @@ const Component = ({
   validationErrors,
   formGroupLookup,
   testID
-}) => {
+}) {
   const [...forms] = group.values();
   const isNested = forms.length > 1;
   const parentForm = forms[0];
@@ -71,7 +71,7 @@ const Component = ({
       )}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/nav/components/nav-item/component.jsx b/app/javascript/components/record-form/nav/components/nav-item/component.jsx
index 1fb95954f2..b90830335d 100644
--- a/app/javascript/components/record-form/nav/components/nav-item/component.jsx
+++ b/app/javascript/components/record-form/nav/components/nav-item/component.jsx
@@ -14,7 +14,7 @@ import { useApp } from "../../../../application";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   form,
   groupItem,
   handleClick,
@@ -27,7 +27,7 @@ const Component = ({
   selectedForm,
   hasError,
   testID
-}) => {
+}) {
   const { disabledApplication } = useApp();
 
   const { formId, group } = form;
@@ -82,7 +82,7 @@ const Component = ({
       {isNested && (open ? <ExpandMore /> : <ExpandLess />)}
     </ListItem>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/nav/components/record-information/component.jsx b/app/javascript/components/record-form/nav/components/record-information/component.jsx
index 2d0b2eded3..e7c8c751b8 100644
--- a/app/javascript/components/record-form/nav/components/record-information/component.jsx
+++ b/app/javascript/components/record-form/nav/components/record-information/component.jsx
@@ -10,7 +10,7 @@ import { RECORD_TYPES } from "../../../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ open, handleClick, primeroModule, selectedForm, formGroupLookup, match, recordAlerts }) => {
+function Component({ open, handleClick, primeroModule, selectedForm, formGroupLookup, match, recordAlerts }) {
   const { params } = match;
   const { recordType } = params;
 
@@ -33,7 +33,7 @@ const Component = ({ open, handleClick, primeroModule, selectedForm, formGroupLo
       testID="record-information"
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-form/nav/components/record-information/component.spec.js b/app/javascript/components/record-form/nav/components/record-information/component.spec.js
index 6ebee2cf3c..eaef28c7f9 100644
--- a/app/javascript/components/record-form/nav/components/record-information/component.spec.js
+++ b/app/javascript/components/record-form/nav/components/record-information/component.spec.js
@@ -25,14 +25,14 @@ describe("<RecordInformation />", () => {
   beforeEach(() => {
     setScreenSizeToMobile(false);
     // eslint-disable-next-line react/display-name
-    const RoutedComponent = initialProps => {
+    function RoutedComponent(initialProps) {
       return (
         <Route
           path="/:recordType(cases|incidents|tracing_requests)/:id"
           component={propsRoute => <RecordInformation {...{ ...propsRoute, ...initialProps }} />}
         />
       );
-    };
+    }
 
     mountedComponent(<RoutedComponent {...props} />, initialState, {}, ["/cases/2b8d6be1-1dc4-483a-8640-4cfe87c71610"]);
   });
diff --git a/app/javascript/components/record-list/add-record-menu.jsx b/app/javascript/components/record-list/add-record-menu.jsx
index a91f6e7df3..3ceda7fb2f 100644
--- a/app/javascript/components/record-list/add-record-menu.jsx
+++ b/app/javascript/components/record-list/add-record-menu.jsx
@@ -19,7 +19,7 @@ import { getOptionFromAppModule } from "../application/selectors";
 import CreateRecordDialog from "./create-record-dialog";
 import { SEARCH_AND_CREATE_WORKFLOW } from "./constants";
 
-const AddRecordMenu = ({ recordType }) => {
+function AddRecordMenu({ recordType }) {
   const dispatch = useDispatch();
   const [moduleUniqueId, setModuleUniqueId] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -105,7 +105,7 @@ const AddRecordMenu = ({ recordType }) => {
       {renderCreateRecord}
     </>
   );
-};
+}
 
 AddRecordMenu.displayName = "AddRecordMenu";
 
diff --git a/app/javascript/components/record-list/components/date-column/component.jsx b/app/javascript/components/record-list/components/date-column/component.jsx
index fca110cc8d..5fbd8651a7 100644
--- a/app/javascript/components/record-list/components/date-column/component.jsx
+++ b/app/javascript/components/record-list/components/date-column/component.jsx
@@ -9,7 +9,7 @@ import NepaliCalendar from "../../../nepali-calendar-input";
 
 import css from "./styles.css";
 
-const Component = ({ rowAvailable, wrapper, value, valueWithTime }) => {
+function Component({ rowAvailable, wrapper, value, valueWithTime }) {
   const i18n = useI18n();
   const parsedValue = valueWithTime
     ? i18n.localizeDate(value, DATE_TIME_FORMAT)
@@ -41,7 +41,7 @@ const Component = ({ rowAvailable, wrapper, value, valueWithTime }) => {
       {children}
     </ConditionalWrapper>
   );
-};
+}
 
 Component.propTypes = {
   rowAvailable: PropTypes.bool,
diff --git a/app/javascript/components/record-list/components/filter-container/component.jsx b/app/javascript/components/record-list/components/filter-container/component.jsx
index e9b21473a4..ed31b03b1c 100644
--- a/app/javascript/components/record-list/components/filter-container/component.jsx
+++ b/app/javascript/components/record-list/components/filter-container/component.jsx
@@ -8,7 +8,7 @@ import { useDrawer } from "../../../drawer";
 import { FILTER_DRAWER, NAME } from "./constants";
 import css from "./styles.css";
 
-const FilterContainer = ({ children, mobileDisplay }) => {
+function FilterContainer({ children, mobileDisplay }) {
   const { drawerOpen, toggleDrawer } = useDrawer(FILTER_DRAWER);
 
   if (mobileDisplay) {
@@ -20,7 +20,7 @@ const FilterContainer = ({ children, mobileDisplay }) => {
   }
 
   return <div className={css.filterContainer}>{children}</div>;
-};
+}
 
 FilterContainer.displayName = NAME;
 
diff --git a/app/javascript/components/record-list/components/photo-column-body/component.jsx b/app/javascript/components/record-list/components/photo-column-body/component.jsx
index a763a7a6ce..f972e614e0 100644
--- a/app/javascript/components/record-list/components/photo-column-body/component.jsx
+++ b/app/javascript/components/record-list/components/photo-column-body/component.jsx
@@ -6,11 +6,13 @@ import { ToggleIconCell } from "../../../index-table";
 import Lightbox from "../../../lightbox";
 import { ALERTS_COLUMNS } from "../../constants";
 
-const Component = ({ css, value }) => (
-  <div className={css.photoIcon}>
-    <Lightbox trigger={<ToggleIconCell value={Boolean(value)} icon={ALERTS_COLUMNS.photo} />} image={value} />
-  </div>
-);
+function Component({ css, value }) {
+  return (
+    <div className={css.photoIcon}>
+      <Lightbox trigger={<ToggleIconCell value={Boolean(value)} icon={ALERTS_COLUMNS.photo} />} image={value} />
+    </div>
+  );
+}
 
 Component.propTypes = {
   css: PropTypes.object,
diff --git a/app/javascript/components/record-list/container.jsx b/app/javascript/components/record-list/container.jsx
index 4fc75c6213..b90faeb66b 100644
--- a/app/javascript/components/record-list/container.jsx
+++ b/app/javascript/components/record-list/container.jsx
@@ -32,7 +32,7 @@ import ViewModal from "./view-modal";
 import SortContainer from "./components/sort-container";
 import FilterContainer from "./components/filter-container";
 
-const Container = ({ match, location }) => {
+function Container({ match, location }) {
   const { mobileDisplay } = useThemeHelper();
   const i18n = useI18n();
   const currentQueryString = location.search.replace("?", "");
@@ -205,7 +205,7 @@ const Container = ({ match, location }) => {
       )}
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/record-list/create-record-dialog/component.jsx b/app/javascript/components/record-list/create-record-dialog/component.jsx
index 7136752e86..b82798cf9a 100644
--- a/app/javascript/components/record-list/create-record-dialog/component.jsx
+++ b/app/javascript/components/record-list/create-record-dialog/component.jsx
@@ -26,7 +26,7 @@ import { FORM_ID, NAME } from "./constants";
 import { searchForm } from "./forms";
 import css from "./styles.css";
 
-const Component = ({ moduleUniqueId, open = false, recordType, setOpen }) => {
+function Component({ moduleUniqueId, open = false, recordType, setOpen }) {
   const formMode = whichFormMode(FORM_MODE_NEW);
 
   const dispatch = useDispatch();
@@ -134,7 +134,7 @@ const Component = ({ moduleUniqueId, open = false, recordType, setOpen }) => {
       </DialogActions>
     </Dialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/record-list/record-list-toolbar/component.jsx b/app/javascript/components/record-list/record-list-toolbar/component.jsx
index 31862cd2b3..c438bf3fcc 100644
--- a/app/javascript/components/record-list/record-list-toolbar/component.jsx
+++ b/app/javascript/components/record-list/record-list-toolbar/component.jsx
@@ -17,7 +17,7 @@ import { NAME } from "./constants";
 
 const mode = { isShow: true };
 
-const Component = ({ title, recordType, selectedRecords, currentPage, clearSelectedRecords }) => {
+function Component({ title, recordType, selectedRecords, currentPage, clearSelectedRecords }) {
   const { toggleDrawer: toggleFilterDrawer } = useDrawer(FILTER_DRAWER);
   const { toggleDrawer: toggleSortDrawer } = useDrawer(SORT_DRAWER);
 
@@ -44,7 +44,7 @@ const Component = ({ title, recordType, selectedRecords, currentPage, clearSelec
       />
     </PageHeading>
   );
-};
+}
 
 Component.propTypes = {
   clearSelectedRecords: PropTypes.func,
diff --git a/app/javascript/components/record-list/view-modal/component.jsx b/app/javascript/components/record-list/view-modal/component.jsx
index 5d9a42cff9..daad165b72 100644
--- a/app/javascript/components/record-list/view-modal/component.jsx
+++ b/app/javascript/components/record-list/view-modal/component.jsx
@@ -17,7 +17,7 @@ import viewModalForm from "./form";
 import TransferRequest from "./transfer-request";
 import { COMMON_FIELD_NAMES, FORM_ID, NAME } from "./constants";
 
-const ViewModal = ({ close, openViewModal, currentRecord, recordType }) => {
+function ViewModal({ close, openViewModal, currentRecord, recordType }) {
   const i18n = useI18n();
   const [sendRequest, setSendRequest] = useState(false);
 
@@ -88,7 +88,7 @@ const ViewModal = ({ close, openViewModal, currentRecord, recordType }) => {
       <TransferRequest {...sendRequestProps} />
     </>
   );
-};
+}
 
 ViewModal.displayName = NAME;
 
diff --git a/app/javascript/components/record-list/view-modal/transfer-request/component.jsx b/app/javascript/components/record-list/view-modal/transfer-request/component.jsx
index 1bf791509f..48b6d1d341 100644
--- a/app/javascript/components/record-list/view-modal/transfer-request/component.jsx
+++ b/app/javascript/components/record-list/view-modal/transfer-request/component.jsx
@@ -16,7 +16,7 @@ import RequestForm from "./request-form";
 import { saveTransferRequest } from "./action-creators";
 import NAMESPACE from "./namespace";
 
-const TransferRequest = ({ open, setOpen, currentRecord, caseId }) => {
+function TransferRequest({ open, setOpen, currentRecord, caseId }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const formikRef = createRef();
@@ -82,7 +82,7 @@ const TransferRequest = ({ open, setOpen, currentRecord, caseId }) => {
       </ActionDialog>
     </>
   );
-};
+}
 
 TransferRequest.displayName = NAME;
 
diff --git a/app/javascript/components/record-list/view-modal/transfer-request/request-form.jsx b/app/javascript/components/record-list/view-modal/transfer-request/request-form.jsx
index ea0f892eaa..072efce9ca 100644
--- a/app/javascript/components/record-list/view-modal/transfer-request/request-form.jsx
+++ b/app/javascript/components/record-list/view-modal/transfer-request/request-form.jsx
@@ -16,7 +16,7 @@ const sharedTextFieldProps = {
   fullWidth: true
 };
 
-const RequestForm = ({ formProps, record }) => {
+function RequestForm({ formProps, record }) {
   const i18n = useI18n();
   const { handleSubmit } = formProps;
 
@@ -45,7 +45,7 @@ const RequestForm = ({ formProps, record }) => {
       </Form>
     </>
   );
-};
+}
 
 RequestForm.displayName = REQUEST_FORM_NAME;
 
diff --git a/app/javascript/components/record-owner/component.jsx b/app/javascript/components/record-owner/component.jsx
index 05c63db945..14891319a8 100644
--- a/app/javascript/components/record-owner/component.jsx
+++ b/app/javascript/components/record-owner/component.jsx
@@ -12,7 +12,7 @@ import useMemoizedSelector from "../../libs/use-memoized-selector";
 
 import { NAME, FIELDS } from "./constants";
 
-const Component = ({ record, recordType, mobileDisplay, handleToggleNav }) => {
+function Component({ record, recordType, mobileDisplay, handleToggleNav }) {
   const i18n = useI18n();
 
   const agencies = useMemoizedSelector(state => selectAgencies(state));
@@ -80,7 +80,7 @@ const Component = ({ record, recordType, mobileDisplay, handleToggleNav }) => {
       </Formik>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/report/components/exporter.jsx b/app/javascript/components/report/components/exporter.jsx
index faec8ad430..d63cc54f17 100644
--- a/app/javascript/components/report/components/exporter.jsx
+++ b/app/javascript/components/report/components/exporter.jsx
@@ -10,7 +10,7 @@ import css from "./styles.css";
 import { downloadFile, tableToCsv } from "./utils";
 import { DEFAULT_FILE_NAME, NAME } from "./constants";
 
-const Exporter = ({ includesGraph = false }) => {
+function Exporter({ includesGraph = false }) {
   const handleClickTableExporter = () => {
     const csvBlob = new Blob([tableToCsv("table tr")], { type: "text/csv" });
 
@@ -55,7 +55,7 @@ const Exporter = ({ includesGraph = false }) => {
       />
     </>
   );
-};
+}
 
 Exporter.displayName = NAME;
 
diff --git a/app/javascript/components/report/container.jsx b/app/javascript/components/report/container.jsx
index 8481ca6ec5..b48a7d4088 100644
--- a/app/javascript/components/report/container.jsx
+++ b/app/javascript/components/report/container.jsx
@@ -32,7 +32,7 @@ import { NAME, DELETE_MODAL } from "./constants";
 import Exporter from "./components/exporter";
 import css from "./styles.css";
 
-const Report = ({ mode }) => {
+function Report({ mode }) {
   const { id } = useParams();
   const i18n = useI18n();
   const dispatch = useDispatch();
@@ -142,7 +142,7 @@ const Report = ({ mode }) => {
       </PageContent>
     </PageContainer>
   );
-};
+}
 
 Report.displayName = NAME;
 
diff --git a/app/javascript/components/reports-form/components/filter-applied/component.jsx b/app/javascript/components/reports-form/components/filter-applied/component.jsx
index 9f38c0284b..47d5da6a24 100644
--- a/app/javascript/components/reports-form/components/filter-applied/component.jsx
+++ b/app/javascript/components/reports-form/components/filter-applied/component.jsx
@@ -19,7 +19,7 @@ import { NAME } from "./constants";
 import { getConstraintLabel } from "./utils";
 import css from "./styles.css";
 
-const Component = ({
+function Component({
   filter,
   handleClickOpen,
   handleClickEdit,
@@ -27,7 +27,7 @@ const Component = ({
   constraints = CONSTRAINTS,
   deleteDisabled,
   showAndLabel = false
-}) => {
+}) {
   const i18n = useI18n();
   const { isRTL } = useThemeHelper();
   const [index, { data }] = filter;
@@ -102,7 +102,7 @@ const Component = ({
       {conditionType === LOGICAL_OPERATORS.OR && <p>{conditionName}</p>}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/reports-form/components/filters-dialog/component.jsx b/app/javascript/components/reports-form/components/filters-dialog/component.jsx
index 5303b5b172..877656928c 100644
--- a/app/javascript/components/reports-form/components/filters-dialog/component.jsx
+++ b/app/javascript/components/reports-form/components/filters-dialog/component.jsx
@@ -17,7 +17,7 @@ import form, { validationSchema } from "./form";
 import { getFilterConstraint, getFilterValue, isNotNullConstraintOrTrue } from "./utils";
 import css from "./styles.css";
 
-const Component = ({ fields, open, setOpen, selectedIndex, setSelectedIndex, indexes, onSuccess }) => {
+function Component({ fields, open, setOpen, selectedIndex, setSelectedIndex, indexes, onSuccess }) {
   const formMode = whichFormMode("edit");
 
   const i18n = useI18n();
@@ -121,7 +121,7 @@ const Component = ({ fields, open, setOpen, selectedIndex, setSelectedIndex, ind
       </ActionDialog>
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/reports-form/components/filters-list/component.jsx b/app/javascript/components/reports-form/components/filters-list/component.jsx
index e7844084f1..d9e61210dd 100644
--- a/app/javascript/components/reports-form/components/filters-list/component.jsx
+++ b/app/javascript/components/reports-form/components/filters-list/component.jsx
@@ -10,7 +10,7 @@ import FilterApplied from "../filter-applied";
 
 import { NAME } from "./constants";
 
-const Component = ({
+function Component({
   constraints,
   handleOpenModal,
   handleEdit,
@@ -18,7 +18,7 @@ const Component = ({
   indexes,
   isConditionsList = false,
   showEmptyMessage = true
-}) => {
+}) {
   const i18n = useI18n();
 
   const handleClickOpen = useCallback((index, filter) => () => handleOpenModal(index, filter), []);
@@ -42,7 +42,7 @@ const Component = ({
       showAndLabel={hasNestedConditions && index === indexes.length - 1}
     />
   ));
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/reports-form/components/filters/component.jsx b/app/javascript/components/reports-form/components/filters/component.jsx
index 0d8347cbac..3130495ea7 100644
--- a/app/javascript/components/reports-form/components/filters/component.jsx
+++ b/app/javascript/components/reports-form/components/filters/component.jsx
@@ -18,7 +18,7 @@ import { NAME } from "./constants";
 import css from "./styles.css";
 import { onFilterDialogSuccess } from "./utils";
 
-const Container = ({
+function Container({
   indexes,
   setIndexes,
   allRecordForms,
@@ -28,7 +28,7 @@ const Container = ({
   formMode,
   selectedRecordType,
   selectedModule
-}) => {
+}) {
   const i18n = useI18n();
 
   const matchableRecordType = MATCH_REPORTABLE_TYPES[selectedRecordType] || selectedRecordType;
@@ -135,7 +135,7 @@ const Container = ({
       />
     </>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/reports-form/container.jsx b/app/javascript/components/reports-form/container.jsx
index a873817601..1d2e195b1d 100644
--- a/app/javascript/components/reports-form/container.jsx
+++ b/app/javascript/components/reports-form/container.jsx
@@ -44,7 +44,7 @@ import { form, validations } from "./form";
 import NAMESPACE from "./namespace";
 import { buildMinimumReportableFields, buildReportFields, checkValue, formatAgeRange, formatReport } from "./utils";
 
-const Container = ({ mode }) => {
+function Container({ mode }) {
   const formMode = whichFormMode(mode);
   const { dialogOpen, setDialog } = useDialog(TranslationsFormName);
 
@@ -213,7 +213,7 @@ const Container = ({ mode }) => {
       </PageContainer>
     </LoadingIndicator>
   );
-};
+}
 
 Container.displayName = NAME;
 
diff --git a/app/javascript/components/reports-list/container.jsx b/app/javascript/components/reports-list/container.jsx
index b0364f18d3..bc30f61174 100644
--- a/app/javascript/components/reports-list/container.jsx
+++ b/app/javascript/components/reports-list/container.jsx
@@ -20,7 +20,7 @@ import IndexTable from "../index-table";
 import { fetchReports } from "./action-creators";
 import NAMESPACE from "./namespace";
 
-const Reports = () => {
+function Reports() {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -81,7 +81,7 @@ const Reports = () => {
       </PageContainer>
     </div>
   );
-};
+}
 
 Reports.displayName = "Reports";
 
diff --git a/app/javascript/components/save-and-redirect-dialog/component.jsx b/app/javascript/components/save-and-redirect-dialog/component.jsx
index 8a4fe8f144..fd8aae6f29 100644
--- a/app/javascript/components/save-and-redirect-dialog/component.jsx
+++ b/app/javascript/components/save-and-redirect-dialog/component.jsx
@@ -11,7 +11,7 @@ import { setSelectedForm } from "../record-form";
 
 import { SAVE_AND_REDIRECT_DIALOG } from "./constants";
 
-const Component = ({
+function Component({
   setSaveCaseBeforeRedirect,
   closeRedirectDialog,
   handleSubmit,
@@ -20,7 +20,7 @@ const Component = ({
   setFieldValue,
   incidentPath = "new",
   recordType
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -54,7 +54,7 @@ const Component = ({
       pending={savingRecord}
     />
   );
-};
+}
 
 Component.displayName = SAVE_AND_REDIRECT_DIALOG;
 
diff --git a/app/javascript/components/saved-searches/ListSavedSearches.jsx b/app/javascript/components/saved-searches/ListSavedSearches.jsx
index 88fd8fc1d5..68b4727473 100644
--- a/app/javascript/components/saved-searches/ListSavedSearches.jsx
+++ b/app/javascript/components/saved-searches/ListSavedSearches.jsx
@@ -20,7 +20,7 @@ import { selectSavedSearchesById } from "./selectors";
 import { buildFiltersState } from "./utils";
 import css from "./styles.css";
 
-const ListSavedSearches = ({ recordType, savedSearches, setTabIndex, setRerender }) => {
+function ListSavedSearches({ recordType, savedSearches, setTabIndex, setRerender }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -104,7 +104,7 @@ const ListSavedSearches = ({ recordType, savedSearches, setTabIndex, setRerender
       <List component="nav">{renderSavedSearches()}</List>
     </div>
   );
-};
+}
 
 ListSavedSearches.displayName = "ListSavedSearches";
 
diff --git a/app/javascript/components/saved-searches/SavedSearchesForm.jsx b/app/javascript/components/saved-searches/SavedSearchesForm.jsx
index 0aad56d1a4..f4c5cff0c6 100644
--- a/app/javascript/components/saved-searches/SavedSearchesForm.jsx
+++ b/app/javascript/components/saved-searches/SavedSearchesForm.jsx
@@ -29,7 +29,7 @@ const validationSchema = object().shape({
   name: string().required()
 });
 
-const SavedSearchesForm = ({ recordType, open, setOpen, getValues }) => {
+function SavedSearchesForm({ recordType, open, setOpen, getValues }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const [formErrors, setFormErrors] = useState(false);
@@ -112,7 +112,7 @@ const SavedSearchesForm = ({ recordType, open, setOpen, getValues }) => {
       </form>
     </Dialog>
   );
-};
+}
 
 SavedSearchesForm.displayName = "SavedSearchesForm";
 
diff --git a/app/javascript/components/saved-searches/component.jsx b/app/javascript/components/saved-searches/component.jsx
index 7ee0f7f15f..e6dc91489a 100644
--- a/app/javascript/components/saved-searches/component.jsx
+++ b/app/javascript/components/saved-searches/component.jsx
@@ -10,7 +10,7 @@ import ListSavedSearches from "./ListSavedSearches";
 import { selectSavedSearches } from "./selectors";
 import css from "./styles.css";
 
-const SavedSearches = ({ recordType, setTabIndex, setRerender }) => {
+function SavedSearches({ recordType, setTabIndex, setRerender }) {
   const i18n = useI18n();
 
   const savedSearches = useMemoizedSelector(state => selectSavedSearches(state, recordType));
@@ -33,7 +33,7 @@ const SavedSearches = ({ recordType, setTabIndex, setRerender }) => {
       )}
     </>
   );
-};
+}
 
 SavedSearches.displayName = "SavedSearches";
 
diff --git a/app/javascript/components/saved-searches/components/form-errors/component.jsx b/app/javascript/components/saved-searches/components/form-errors/component.jsx
index fdd2105069..01cf83da38 100644
--- a/app/javascript/components/saved-searches/components/form-errors/component.jsx
+++ b/app/javascript/components/saved-searches/components/form-errors/component.jsx
@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { useI18n } from "../../../i18n";
 import { enqueueSnackbar } from "../../../notifier";
 
-const FormErrors = () => {
+function FormErrors() {
   const dispatch = useDispatch();
   const i18n = useI18n();
 
@@ -13,7 +13,7 @@ const FormErrors = () => {
   }, [dispatch, i18n]);
 
   return null;
-};
+}
 
 FormErrors.displayName = "FormErrors";
 
diff --git a/app/javascript/components/searchable-select/component.jsx b/app/javascript/components/searchable-select/component.jsx
index 937d789b6b..6d7ef6a8b2 100644
--- a/app/javascript/components/searchable-select/component.jsx
+++ b/app/javascript/components/searchable-select/component.jsx
@@ -11,7 +11,7 @@ import css from "./styles.css";
 import { optionLabel, optionEquality, optionDisabled, filterOptions } from "./utils";
 import { listboxClasses, virtualize } from "./components/listbox-component";
 
-const SearchableSelect = ({
+function SearchableSelect({
   error,
   defaultValues = null,
   helperText = "",
@@ -30,7 +30,7 @@ const SearchableSelect = ({
   optionLabelKey = "label",
   name,
   value: fieldValue
-}) => {
+}) {
   const defaultEmptyValue = multiple ? [] : null;
 
   const initialValues = (() => {
@@ -122,7 +122,7 @@ const SearchableSelect = ({
       renderTags={handleRenderTags}
     />
   );
-};
+}
 
 SearchableSelect.displayName = NAME;
 
diff --git a/app/javascript/components/session-timeout-dialog/component.jsx b/app/javascript/components/session-timeout-dialog/component.jsx
index df1a793d88..faaa43e4ea 100644
--- a/app/javascript/components/session-timeout-dialog/component.jsx
+++ b/app/javascript/components/session-timeout-dialog/component.jsx
@@ -14,7 +14,7 @@ import useMemoizedSelector from "../../libs/use-memoized-selector";
 
 import { NAME } from "./constants";
 
-const SessionTimeoutDialog = () => {
+function SessionTimeoutDialog() {
   const { online } = useApp();
   const tokenRefreshTimer = useRef();
   const dispatch = useDispatch();
@@ -119,7 +119,7 @@ const SessionTimeoutDialog = () => {
       </Dialog>
     </>
   ) : null;
-};
+}
 
 SessionTimeoutDialog.displayName = NAME;
 
diff --git a/app/javascript/components/summary-incident-mrm/component.jsx b/app/javascript/components/summary-incident-mrm/component.jsx
index a6689348f9..8d03063615 100644
--- a/app/javascript/components/summary-incident-mrm/component.jsx
+++ b/app/javascript/components/summary-incident-mrm/component.jsx
@@ -11,7 +11,7 @@ import ViolationsSubforms from "./components/violations-subforms";
 import SummaryFields from "./components/summary-fields";
 import ChildrenMultipleViolations from "./components/children-multiple-violations";
 
-const Component = ({ recordID, recordType, mobileDisplay, handleToggleNav, mode, formSections, values }) => {
+function Component({ recordID, recordType, mobileDisplay, handleToggleNav, mode, formSections, values }) {
   const i18n = useI18n();
 
   return (
@@ -28,7 +28,7 @@ const Component = ({ recordID, recordType, mobileDisplay, handleToggleNav, mode,
       <ChildrenMultipleViolations recordType={recordType} formSections={formSections} values={values} />
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary-incident-mrm/components/children-multiple-violations/component.jsx b/app/javascript/components/summary-incident-mrm/components/children-multiple-violations/component.jsx
index 0b92b7f11d..878d6b1343 100644
--- a/app/javascript/components/summary-incident-mrm/components/children-multiple-violations/component.jsx
+++ b/app/javascript/components/summary-incident-mrm/components/children-multiple-violations/component.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../../i18n";
 
 import { NAME, INDIVIDUAL_VICTIMS, INDIVIDUAL_MULTIPLE_VIOLATIONS } from "./constants";
 
-const Component = ({ recordType, formSections, values }) => {
+function Component({ recordType, formSections, values }) {
   const i18n = useI18n();
   const subformMode = { isNew: false, isEdit: false, isShow: true };
   const recordTypePlural = RECORD_TYPES_PLURAL[recordType];
@@ -36,7 +36,7 @@ const Component = ({ recordType, formSections, values }) => {
       customTitle={i18n.t("incidents.summary_mrm.fields.children_multiple_violation.label")}
     />
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary-incident-mrm/components/summary-fields/component.jsx b/app/javascript/components/summary-incident-mrm/components/summary-fields/component.jsx
index cd35bf8138..28b60a8d87 100644
--- a/app/javascript/components/summary-incident-mrm/components/summary-fields/component.jsx
+++ b/app/javascript/components/summary-incident-mrm/components/summary-fields/component.jsx
@@ -10,7 +10,7 @@ import FormSectionField from "../../../record-form/form/form-section-field";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ recordID, recordType, mode }) => {
+function Component({ recordID, recordType, mode }) {
   const i18n = useI18n();
 
   return fields(i18n).map(field => {
@@ -29,7 +29,7 @@ const Component = ({ recordID, recordType, mode }) => {
       </div>
     );
   });
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary-incident-mrm/components/violations-subforms/component.jsx b/app/javascript/components/summary-incident-mrm/components/violations-subforms/component.jsx
index 41893ff9f8..8d75f1786f 100644
--- a/app/javascript/components/summary-incident-mrm/components/violations-subforms/component.jsx
+++ b/app/javascript/components/summary-incident-mrm/components/violations-subforms/component.jsx
@@ -9,7 +9,7 @@ import SubformField from "../../../record-form/form/subforms";
 
 import { NAME } from "./constants";
 
-const Component = ({ recordType, formSections, values }) => {
+function Component({ recordType, formSections, values }) {
   const subformMode = { isNew: false, isEdit: false, isShow: true };
   const recordTypePlural = RECORD_TYPES_PLURAL[recordType];
 
@@ -42,7 +42,7 @@ const Component = ({ recordType, formSections, values }) => {
       />
     );
   });
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary/component.jsx b/app/javascript/components/summary/component.jsx
index 27544a056c..ab1d69e7f2 100644
--- a/app/javascript/components/summary/component.jsx
+++ b/app/javascript/components/summary/component.jsx
@@ -29,7 +29,7 @@ import { NAME, FIELD_NAMES } from "./constants";
 import { fields } from "./form";
 import css from "./styles.css";
 
-const Component = ({ record, recordType, mobileDisplay, handleToggleNav, form, mode, values }) => {
+function Component({ record, recordType, mobileDisplay, handleToggleNav, form, mode, values }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -137,7 +137,7 @@ const Component = ({ record, recordType, mobileDisplay, handleToggleNav, form, m
       />
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary/components/comparison-form/component.jsx b/app/javascript/components/summary/components/comparison-form/component.jsx
index ca83bc8a53..39448a05ce 100644
--- a/app/javascript/components/summary/components/comparison-form/component.jsx
+++ b/app/javascript/components/summary/components/comparison-form/component.jsx
@@ -10,7 +10,7 @@ import { RECORD_TYPES_PLURAL } from "../../../../config";
 
 import { NAME } from "./constants";
 
-const Component = ({ selectedForm, recordType, potentialMatch, setSelectedForm }) => {
+function Component({ selectedForm, recordType, potentialMatch, setSelectedForm }) {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -30,7 +30,7 @@ const Component = ({ selectedForm, recordType, potentialMatch, setSelectedForm }
       />
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary/components/matched-traces/component.jsx b/app/javascript/components/summary/components/matched-traces/component.jsx
index 5940777e1e..fc4c429538 100644
--- a/app/javascript/components/summary/components/matched-traces/component.jsx
+++ b/app/javascript/components/summary/components/matched-traces/component.jsx
@@ -17,7 +17,7 @@ import { MatchedTracePanel } from "./components";
 import { NAME } from "./constants";
 import css from "./styles.css";
 
-const Component = ({ data = fromJS([]), loading, record, setSelectedForm }) => {
+function Component({ data = fromJS([]), loading, record, setSelectedForm }) {
   const i18n = useI18n();
 
   const dispatch = useDispatch();
@@ -88,7 +88,7 @@ const Component = ({ data = fromJS([]), loading, record, setSelectedForm }) => {
       </SubformDrawer>
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary/components/matched-traces/components/matched-trace-panel/component.jsx b/app/javascript/components/summary/components/matched-traces/components/matched-trace-panel/component.jsx
index d7bbafd87e..f5c356967d 100644
--- a/app/javascript/components/summary/components/matched-traces/components/matched-trace-panel/component.jsx
+++ b/app/javascript/components/summary/components/matched-traces/components/matched-trace-panel/component.jsx
@@ -10,7 +10,7 @@ import { getShortIdFromUniqueId } from "../../../../../records";
 
 import { NAME } from "./constants";
 
-const Component = ({ matchedTrace, setOpen, setSelectedTraceId }) => {
+function Component({ matchedTrace, setOpen, setSelectedTraceId }) {
   const matchedTraceId = matchedTrace.get("id");
   const handleOnClick = id => {
     setOpen(true);
@@ -38,7 +38,7 @@ const Component = ({ matchedTrace, setOpen, setSelectedTraceId }) => {
       </AccordionSummary>
     </Accordion>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/summary/components/matches-form/component.jsx b/app/javascript/components/summary/components/matches-form/component.jsx
index 8f4b66cf5b..c3f45645f4 100644
--- a/app/javascript/components/summary/components/matches-form/component.jsx
+++ b/app/javascript/components/summary/components/matches-form/component.jsx
@@ -22,7 +22,7 @@ import { useMemoizedSelector } from "../../../../libs";
 import { NAME } from "./constants";
 import { columns } from "./utils";
 
-const Component = ({ css, i18n, mode, open, record, setSelectedForm, matchedTracesData }) => {
+function Component({ css, i18n, mode, open, record, setSelectedForm, matchedTracesData }) {
   const dispatch = useDispatch();
 
   const data = useMemoizedSelector(state => getCasesPotentialMatches(state));
@@ -69,7 +69,7 @@ const Component = ({ css, i18n, mode, open, record, setSelectedForm, matchedTrac
       <IndexTable {...tableOptions} />
     </LoadingIndicator>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/tooltip/component.jsx b/app/javascript/components/tooltip/component.jsx
index 84ebb5e73d..21b1dc42d7 100644
--- a/app/javascript/components/tooltip/component.jsx
+++ b/app/javascript/components/tooltip/component.jsx
@@ -8,7 +8,7 @@ import { useI18n } from "../i18n";
 
 import css from "./styles.css";
 
-const Tooltip = ({ children, title = "", i18nTitle = false }) => {
+function Tooltip({ children, title = "", i18nTitle = false }) {
   const i18n = useI18n();
 
   const commonTooltipProps = {
@@ -27,7 +27,7 @@ const Tooltip = ({ children, title = "", i18nTitle = false }) => {
       {children}
     </ConditionalWrapper>
   );
-};
+}
 
 Tooltip.displayName = "Tooltip";
 
diff --git a/app/javascript/components/tooltip/component.spec.js b/app/javascript/components/tooltip/component.spec.js
index 1decdd2243..a6599c6171 100644
--- a/app/javascript/components/tooltip/component.spec.js
+++ b/app/javascript/components/tooltip/component.spec.js
@@ -5,11 +5,13 @@ import Tooltip from "./component";
 describe("components/tooltip", () => {
   it("renders tooltip", () => {
     // eslint-disable-next-line react/display-name
-    const TooltipComponent = () => (
-      <Tooltip title="wrapper content" data-testid="wrapper-content">
-        <div>wrapped children</div>
-      </Tooltip>
-    );
+    function TooltipComponent() {
+      return (
+        <Tooltip title="wrapper content" data-testid="wrapper-content">
+          <div>wrapped children</div>
+        </Tooltip>
+      );
+    }
 
     mountedComponent(<TooltipComponent />);
     expect(screen.getByText(/wrapped children/i)).toBeInTheDocument();
@@ -17,11 +19,13 @@ describe("components/tooltip", () => {
 
   it("does not render tooltip without title", () => {
     // eslint-disable-next-line react/display-name, react/no-multi-comp
-    const TooltipComponent = () => (
-      <Tooltip title="">
-        <div>wrapped children</div>
-      </Tooltip>
-    );
+    function TooltipComponent() {
+      return (
+        <Tooltip title="">
+          <div>wrapped children</div>
+        </Tooltip>
+      );
+    }
 
     mountedComponent(<TooltipComponent />);
     expect(screen.getByText(/wrapped children/i)).toBeInTheDocument();
diff --git a/app/javascript/components/transitions/TransitionPanel.jsx b/app/javascript/components/transitions/TransitionPanel.jsx
index da66b9d135..88b72edbbd 100644
--- a/app/javascript/components/transitions/TransitionPanel.jsx
+++ b/app/javascript/components/transitions/TransitionPanel.jsx
@@ -7,7 +7,7 @@ import { Accordion } from "@mui/material";
 import { TRANSITION_PANEL_NAME as NAME } from "./constants";
 import css from "./styles.css";
 
-const TransitionPanel = ({ children }) => {
+function TransitionPanel({ children }) {
   const [expanded, setExpanded] = useState(false);
 
   const handleExpanded = () => {
@@ -19,7 +19,7 @@ const TransitionPanel = ({ children }) => {
       {children}
     </Accordion>
   );
-};
+}
 
 TransitionPanel.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/TransitionStatus.jsx b/app/javascript/components/transitions/TransitionStatus.jsx
index f6c2f22bcf..8ed1b2df60 100644
--- a/app/javascript/components/transitions/TransitionStatus.jsx
+++ b/app/javascript/components/transitions/TransitionStatus.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../i18n";
 import { TRANSITION_STATUS_NAME as NAME } from "./constants";
 import css from "./styles.css";
 
-const TransitionStatus = ({ status }) => {
+function TransitionStatus({ status }) {
   const i18n = useI18n();
 
   const classes = clsx(css.chip, css[status]);
@@ -19,7 +19,7 @@ const TransitionStatus = ({ status }) => {
       <Chip label={i18n.t(`transition.status.${status}`)} className={classes} size="small" />
     </div>
   );
-};
+}
 
 TransitionStatus.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/assignments/AssignmentsDetails.jsx b/app/javascript/components/transitions/assignments/AssignmentsDetails.jsx
index 41cac4409a..592d30867d 100644
--- a/app/javascript/components/transitions/assignments/AssignmentsDetails.jsx
+++ b/app/javascript/components/transitions/assignments/AssignmentsDetails.jsx
@@ -8,7 +8,7 @@ import DisplayData from "../../display-data";
 
 import { ASSIGNMENTS_DETAILS_NAME as NAME } from "./constants";
 
-const AssignmentsDetails = ({ transition, classes }) => {
+function AssignmentsDetails({ transition, classes }) {
   const i18n = useI18n();
 
   return (
@@ -28,7 +28,7 @@ const AssignmentsDetails = ({ transition, classes }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 AssignmentsDetails.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/assignments/AssignmentsSummary.jsx b/app/javascript/components/transitions/assignments/AssignmentsSummary.jsx
index c9ed8087d7..cf549afee0 100644
--- a/app/javascript/components/transitions/assignments/AssignmentsSummary.jsx
+++ b/app/javascript/components/transitions/assignments/AssignmentsSummary.jsx
@@ -7,7 +7,7 @@ import { useI18n } from "../../i18n";
 
 import { ASSIGNMENTS_SUMMARY_NAME as NAME } from "./constants";
 
-const AssignmentsSummary = ({ transition, classes }) => {
+function AssignmentsSummary({ transition, classes }) {
   const i18n = useI18n();
 
   // TODO: It has to be modified, on summary should print username
@@ -31,7 +31,7 @@ const AssignmentsSummary = ({ transition, classes }) => {
       {/* {renderTransitioned} */}
     </Grid>
   );
-};
+}
 
 AssignmentsSummary.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/components/date-transitions-summary/component.jsx b/app/javascript/components/transitions/components/date-transitions-summary/component.jsx
index 1aa70b67b1..5cbf44c232 100644
--- a/app/javascript/components/transitions/components/date-transitions-summary/component.jsx
+++ b/app/javascript/components/transitions/components/date-transitions-summary/component.jsx
@@ -10,7 +10,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ value }) => {
+function Component({ value }) {
   const i18n = useI18n();
 
   if (isEmpty(value)) {
@@ -36,7 +36,7 @@ const Component = ({ value }) => {
       {i18n.localizeDate(value)}
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/components/date-transitions/component.jsx b/app/javascript/components/transitions/components/date-transitions/component.jsx
index 32b3d56618..5f717246e4 100644
--- a/app/javascript/components/transitions/components/date-transitions/component.jsx
+++ b/app/javascript/components/transitions/components/date-transitions/component.jsx
@@ -11,7 +11,7 @@ import css from "../../styles.css";
 
 import { NAME } from "./constants";
 
-const Component = ({ name, label, value }) => {
+function Component({ name, label, value }) {
   const i18n = useI18n();
 
   if (isEmpty(value)) {
@@ -35,7 +35,7 @@ const Component = ({ name, label, value }) => {
   }
 
   return <DisplayData label={label} value={i18n.localizeDate(value, DATE_TIME_FORMAT)} />;
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/components/menu-actions/component.jsx b/app/javascript/components/transitions/components/menu-actions/component.jsx
index e72dc6da44..e6f38a3880 100644
--- a/app/javascript/components/transitions/components/menu-actions/component.jsx
+++ b/app/javascript/components/transitions/components/menu-actions/component.jsx
@@ -23,7 +23,7 @@ import { useMemoizedSelector } from "../../../../libs";
 
 import { NAME, REVOKE_MODAL } from "./constants";
 
-const Component = ({ transition, showMode, recordType, classes }) => {
+function Component({ transition, showMode, recordType, classes }) {
   const i18n = useI18n();
   const {
     id,
@@ -216,7 +216,7 @@ const Component = ({ transition, showMode, recordType, classes }) => {
       )}
     </div>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/components/revoke-modal/component.jsx b/app/javascript/components/transitions/components/revoke-modal/component.jsx
index 986d9fe316..9fa93038a5 100644
--- a/app/javascript/components/transitions/components/revoke-modal/component.jsx
+++ b/app/javascript/components/transitions/components/revoke-modal/component.jsx
@@ -16,7 +16,7 @@ import { useMemoizedSelector } from "../../../../libs";
 import { revokeTransition } from "./action-creators";
 import { NAME } from "./constants";
 
-const Component = ({ name, close, open, pending, recordType, setPending, transition }) => {
+function Component({ name, close, open, pending, recordType, setPending, transition }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const transitionType = transition.type.toLowerCase();
@@ -82,7 +82,7 @@ const Component = ({ name, close, open, pending, recordType, setPending, transit
       })}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/container.jsx b/app/javascript/components/transitions/container.jsx
index 4a59ccee49..3aea568c93 100644
--- a/app/javascript/components/transitions/container.jsx
+++ b/app/javascript/components/transitions/container.jsx
@@ -16,7 +16,7 @@ import renderTransition from "./render-transition";
 import css from "./styles.css";
 import { fetchTransitions } from "./action-creators";
 
-const Transitions = ({
+function Transitions({
   fetchable = false,
   isReferral,
   recordType,
@@ -24,7 +24,7 @@ const Transitions = ({
   showMode,
   mobileDisplay,
   handleToggleNav
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -57,7 +57,7 @@ const Transitions = ({
       <div>{renderDataTransitions}</div>
     </div>
   );
-};
+}
 
 Transitions.displayName = TRANSITIONS_NAME;
 
diff --git a/app/javascript/components/transitions/referrals/details.jsx b/app/javascript/components/transitions/referrals/details.jsx
index ef79da398a..b4b05ebac1 100644
--- a/app/javascript/components/transitions/referrals/details.jsx
+++ b/app/javascript/components/transitions/referrals/details.jsx
@@ -17,7 +17,7 @@ import DateTransitions from "../components/date-transitions";
 import renderIconValue from "./render-icon-value";
 import { referralAgencyName } from "./utils";
 
-const Details = ({ transition, classes }) => {
+function Details({ transition, classes }) {
   const i18n = useI18n();
 
   const service = useMemoizedSelector(state => {
@@ -90,7 +90,7 @@ const Details = ({ transition, classes }) => {
       )}
     </Grid>
   );
-};
+}
 
 Details.displayName = REFERRAL_DETAILS_NAME;
 
diff --git a/app/javascript/components/transitions/referrals/referral-action-menu.js b/app/javascript/components/transitions/referrals/referral-action-menu.js
index 73b186e93a..b12902084e 100644
--- a/app/javascript/components/transitions/referrals/referral-action-menu.js
+++ b/app/javascript/components/transitions/referrals/referral-action-menu.js
@@ -11,7 +11,7 @@ import { useDialog } from "../../action-dialog";
 import { DONE, REFERRAL_DONE_DIALOG, REFERRAL_ACTION_MENU_NAME as NAME } from "./constants";
 import ReferralAction from "./referral-action";
 
-const ReferralActionMenu = ({ transition, recordType }) => {
+function ReferralActionMenu({ transition, recordType }) {
   const i18n = useI18n();
   const [referralMenu, setReferralMenu] = useState(null);
   const [referralType, setReferralType] = useState(DONE);
@@ -74,7 +74,7 @@ const ReferralActionMenu = ({ transition, recordType }) => {
       />
     </>
   );
-};
+}
 
 ReferralActionMenu.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/referrals/referral-action/component.jsx b/app/javascript/components/transitions/referrals/referral-action/component.jsx
index 0500ae99b7..7d5796fcda 100644
--- a/app/javascript/components/transitions/referrals/referral-action/component.jsx
+++ b/app/javascript/components/transitions/referrals/referral-action/component.jsx
@@ -17,7 +17,7 @@ import { DONE } from "../constants";
 import { referralAccepted, referralDone, referralRejected } from "./action-creators";
 import { NAME, FORM_ID, FORM_NOTE_FIELD_ID } from "./constants";
 
-const Component = ({
+function Component({
   openReferralDialog = false,
   close,
   dialogName,
@@ -27,7 +27,7 @@ const Component = ({
   recordType,
   transistionId,
   referralType
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
 
@@ -194,7 +194,7 @@ const Component = ({
       {dialogContent}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/referrals/render-icon-value.jsx b/app/javascript/components/transitions/referrals/render-icon-value.jsx
index 3bd5f731e8..d1ede938f9 100644
--- a/app/javascript/components/transitions/referrals/render-icon-value.jsx
+++ b/app/javascript/components/transitions/referrals/render-icon-value.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import Cancel from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
diff --git a/app/javascript/components/transitions/referrals/summary.jsx b/app/javascript/components/transitions/referrals/summary.jsx
index d3fac1ee5b..18175f1592 100644
--- a/app/javascript/components/transitions/referrals/summary.jsx
+++ b/app/javascript/components/transitions/referrals/summary.jsx
@@ -9,7 +9,7 @@ import { useI18n } from "../../i18n";
 import { REFERRAL_SUMMARY_NAME } from "../constants";
 import DateTransitionsSummary from "../components/date-transitions-summary";
 
-const Summary = ({ transition, classes, showMode, recordType }) => {
+function Summary({ transition, classes, showMode, recordType }) {
   const i18n = useI18n();
   const transitionStatus = transition.status ? (
     <Grid item md={3} xs={8} className={classes.status}>
@@ -31,7 +31,7 @@ const Summary = ({ transition, classes, showMode, recordType }) => {
       {transitionStatus}
     </Grid>
   );
-};
+}
 
 Summary.displayName = REFERRAL_SUMMARY_NAME;
 
diff --git a/app/javascript/components/transitions/render-details.jsx b/app/javascript/components/transitions/render-details.jsx
index 8d7876013b..bccb1429d4 100644
--- a/app/javascript/components/transitions/render-details.jsx
+++ b/app/javascript/components/transitions/render-details.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import AssignmentsDetails from "./assignments/AssignmentsDetails";
 import ReferralDetails from "./referrals/details";
diff --git a/app/javascript/components/transitions/render-summary.jsx b/app/javascript/components/transitions/render-summary.jsx
index 42b2844650..ac35bec1fc 100644
--- a/app/javascript/components/transitions/render-summary.jsx
+++ b/app/javascript/components/transitions/render-summary.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import AssignmentsSummary from "./assignments/AssignmentsSummary";
 import ReferralSummary from "./referrals/summary";
diff --git a/app/javascript/components/transitions/render-transition.jsx b/app/javascript/components/transitions/render-transition.jsx
index 76f12468fc..4afa4cb455 100644
--- a/app/javascript/components/transitions/render-transition.jsx
+++ b/app/javascript/components/transitions/render-transition.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import { AccordionSummary, AccordionDetails } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
diff --git a/app/javascript/components/transitions/transfer_requests/details.jsx b/app/javascript/components/transitions/transfer_requests/details.jsx
index ad77e0c7ac..7a90b01cfc 100644
--- a/app/javascript/components/transitions/transfer_requests/details.jsx
+++ b/app/javascript/components/transitions/transfer_requests/details.jsx
@@ -7,7 +7,7 @@ import { TRANSFER_REQUEST_DETAILS_NAME } from "../constants";
 import DisplayData from "../../display-data";
 import css from "../styles.css";
 
-const Details = ({ transition }) => {
+function Details({ transition }) {
   return (
     <Grid container spacing={2}>
       <Grid item md={6} xs={12}>
@@ -22,7 +22,7 @@ const Details = ({ transition }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 Details.displayName = TRANSFER_REQUEST_DETAILS_NAME;
 
diff --git a/app/javascript/components/transitions/transfer_requests/summary.jsx b/app/javascript/components/transitions/transfer_requests/summary.jsx
index 4ea79a779c..cc14986a18 100644
--- a/app/javascript/components/transitions/transfer_requests/summary.jsx
+++ b/app/javascript/components/transitions/transfer_requests/summary.jsx
@@ -7,7 +7,7 @@ import TransitionStatus from "../TransitionStatus";
 import { useI18n } from "../../i18n";
 import { TRANSFER_REQUEST_SUMMARY_NAME } from "../constants";
 
-const Summary = ({ transition, classes }) => {
+function Summary({ transition, classes }) {
   const i18n = useI18n();
   const transitionStatus = transition.status ? (
     <Grid item md={2} xs={4}>
@@ -30,7 +30,7 @@ const Summary = ({ transition, classes }) => {
       {transitionStatus}
     </Grid>
   );
-};
+}
 
 Summary.displayName = TRANSFER_REQUEST_SUMMARY_NAME;
 
diff --git a/app/javascript/components/transitions/transfers/TransferDetails.jsx b/app/javascript/components/transitions/transfers/TransferDetails.jsx
index 586c03ddee..f0eb7d8eb3 100644
--- a/app/javascript/components/transitions/transfers/TransferDetails.jsx
+++ b/app/javascript/components/transitions/transfers/TransferDetails.jsx
@@ -11,7 +11,7 @@ import DateTransitions from "../components/date-transitions";
 import { NAME } from "./constants";
 import renderIconValue from "./render-icon-value";
 
-const TransferDetails = ({ transition }) => {
+function TransferDetails({ transition }) {
   const i18n = useI18n();
 
   const renderRejected =
@@ -81,7 +81,7 @@ const TransferDetails = ({ transition }) => {
       </Grid>
     </Grid>
   );
-};
+}
 
 TransferDetails.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/transfers/TransferSummary.jsx b/app/javascript/components/transitions/transfers/TransferSummary.jsx
index 7a8f73cba8..bbdad4aff8 100644
--- a/app/javascript/components/transitions/transfers/TransferSummary.jsx
+++ b/app/javascript/components/transitions/transfers/TransferSummary.jsx
@@ -9,7 +9,7 @@ import TransitionStatus from "../TransitionStatus";
 import TransitionActions from "../components/menu-actions";
 import DateTransitionsSummary from "../components/date-transitions-summary";
 
-const TransferSummary = ({ transition, classes, showMode, recordType }) => {
+function TransferSummary({ transition, classes, showMode, recordType }) {
   const i18n = useI18n();
   const transitionStatus = transition.status ? (
     <Grid item md={3} xs={3} className={classes.status}>
@@ -29,7 +29,7 @@ const TransferSummary = ({ transition, classes, showMode, recordType }) => {
       {transitionStatus}
     </Grid>
   );
-};
+}
 
 TransferSummary.propTypes = {
   classes: PropTypes.object.isRequired,
diff --git a/app/javascript/components/transitions/transfers/render-icon-value.jsx b/app/javascript/components/transitions/transfers/render-icon-value.jsx
index 3bd5f731e8..d1ede938f9 100644
--- a/app/javascript/components/transitions/transfers/render-icon-value.jsx
+++ b/app/javascript/components/transitions/transfers/render-icon-value.jsx
@@ -1,4 +1,5 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
+/* eslint-disable react/function-component-definition */
 
 import Cancel from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
diff --git a/app/javascript/components/transitions/transfers/transfer-action-menu.jsx b/app/javascript/components/transitions/transfers/transfer-action-menu.jsx
index 0536e0f09d..b10fe1603a 100644
--- a/app/javascript/components/transitions/transfers/transfer-action-menu.jsx
+++ b/app/javascript/components/transitions/transfers/transfer-action-menu.jsx
@@ -12,7 +12,7 @@ import { useDialog } from "../../action-dialog";
 import { APPROVE, TRANSFER_APPROVAL_DIALOG, TRANSFER_ACTION_MENU_NAME as NAME } from "./constants";
 import TransferApproval from "./transfer-approval";
 
-const TransferActionMenu = ({ transition, recordType }) => {
+function TransferActionMenu({ transition, recordType }) {
   const i18n = useI18n();
   const [transferMenu, setTransferMenu] = useState(null);
   const [approvalType, setApprovalType] = useState(ACCEPTED);
@@ -85,7 +85,7 @@ const TransferActionMenu = ({ transition, recordType }) => {
       />
     </>
   );
-};
+}
 
 TransferActionMenu.displayName = NAME;
 
diff --git a/app/javascript/components/transitions/transfers/transfer-approval/component.js b/app/javascript/components/transitions/transfers/transfer-approval/component.js
index e5ed8cc5c6..f17bf9cef8 100644
--- a/app/javascript/components/transitions/transfers/transfer-approval/component.js
+++ b/app/javascript/components/transitions/transfers/transfer-approval/component.js
@@ -16,7 +16,7 @@ import { getTransitionById } from "../../selectors";
 import { approvalTransfer } from "./action-creators";
 import { FORM_ID, NAME } from "./constants";
 
-const Component = ({
+function Component({
   openTransferDialog = false,
   close,
   approvalType,
@@ -26,7 +26,7 @@ const Component = ({
   pending,
   setPending,
   transferId
-}) => {
+}) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { currentUserName } = useApp();
@@ -129,7 +129,7 @@ const Component = ({
       {dialogContent}
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/translations-dialog/component.jsx b/app/javascript/components/translations-dialog/component.jsx
index 23dc6e166e..3f8e1b4c27 100644
--- a/app/javascript/components/translations-dialog/component.jsx
+++ b/app/javascript/components/translations-dialog/component.jsx
@@ -15,7 +15,7 @@ import { translationsForm, validationSchema } from "./form";
 import { localesToRender } from "./utils";
 import css from "./styles.css";
 
-const Component = ({ formMethods, mode, dialogTitle }) => {
+function Component({ formMethods, mode, dialogTitle }) {
   const i18n = useI18n();
   const validations = validationSchema(i18n);
   const currentValues = formMethods.getValues({ nest: true });
@@ -80,7 +80,7 @@ const Component = ({ formMethods, mode, dialogTitle }) => {
       />
     </ActionDialog>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/components/translations-toggle/component.jsx b/app/javascript/components/translations-toggle/component.jsx
index dd0bb3734c..98e04c20a8 100644
--- a/app/javascript/components/translations-toggle/component.jsx
+++ b/app/javascript/components/translations-toggle/component.jsx
@@ -13,7 +13,7 @@ import { useApp } from "../application";
 import css from "./styles.css";
 import { NAME } from "./constants";
 
-const TranslationsToggle = () => {
+function TranslationsToggle() {
   const { changeLocale, locale, ...i18n } = useI18n();
   const [anchorEl, setAnchorEl] = useState(null);
   const { useContainedNavStyle } = useApp();
@@ -87,7 +87,7 @@ const TranslationsToggle = () => {
       </Menu>
     </>
   );
-};
+}
 
 TranslationsToggle.displayName = NAME;
 
diff --git a/app/javascript/components/user-actions/component.jsx b/app/javascript/components/user-actions/component.jsx
index dd3bedd997..0f938f0c39 100644
--- a/app/javascript/components/user-actions/component.jsx
+++ b/app/javascript/components/user-actions/component.jsx
@@ -13,7 +13,7 @@ import useMemoizedSelector from "../../libs/use-memoized-selector";
 
 import { NAME } from "./constants";
 
-const Component = ({ id }) => {
+function Component({ id }) {
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { setDialog, dialogOpen, dialogClose } = useDialog(DIALOG_NAME);
@@ -44,7 +44,7 @@ const Component = ({ id }) => {
       )}
     </>
   );
-};
+}
 
 Component.displayName = NAME;
 
diff --git a/app/javascript/libs/conditional-wrapper.js b/app/javascript/libs/conditional-wrapper.js
index 3935c012ac..48c6d4e032 100644
--- a/app/javascript/libs/conditional-wrapper.js
+++ b/app/javascript/libs/conditional-wrapper.js
@@ -3,13 +3,13 @@
 /* eslint-disable import/prefer-default-export */
 import PropTypes from "prop-types";
 
-const ConditionalWrapper = ({ condition, wrapper: Wrapper, children, ...rest }) => {
+function ConditionalWrapper({ condition, wrapper: Wrapper, children, ...rest }) {
   if (condition) {
     return typeof Wrapper === "function" ? Wrapper({ children, ...rest }) : <Wrapper {...rest}>{children}</Wrapper>;
   }
 
   return children;
-};
+}
 
 ConditionalWrapper.displayName = "ConditionalWrapper";
 
diff --git a/app/javascript/test-utils/mounted-form-component.js b/app/javascript/test-utils/mounted-form-component.js
index c0000d5b56..1c0a40e881 100644
--- a/app/javascript/test-utils/mounted-form-component.js
+++ b/app/javascript/test-utils/mounted-form-component.js
@@ -53,7 +53,7 @@ function setupMockFormComponent({
   state,
   additionalProps
 }) {
-  const MockFormComponent = ({ children, inputProps, field, mode }) => {
+  function MockFormComponent({ children, inputProps, field, mode }) {
     const formMethods = useForm({ defaultValues });
     const formMode = whichFormMode(mode || "new");
 
@@ -85,7 +85,7 @@ function setupMockFormComponent({
     }
 
     return cloneElement(children, { formMode, formMethods, ...componentProps });
-  };
+  }
 
   const { AppProviders, history, store } = setupMountedComponent({ state });
 
diff --git a/app/javascript/test-utils/mounted-theme-component.js b/app/javascript/test-utils/mounted-theme-component.js
index bf7ddb0b30..718c6d8a2d 100644
--- a/app/javascript/test-utils/mounted-theme-component.js
+++ b/app/javascript/test-utils/mounted-theme-component.js
@@ -12,13 +12,13 @@ import { createMockStore, DEFAULT_STATE } from "./create-mock-store";
 function mountedThemeComponent(Component, state = DEFAULT_STATE) {
   const { store, history } = createMockStore(state, fromJS({}));
 
-  const Providers = ({ children }) => {
+  function Providers({ children }) {
     return (
       <Provider store={store}>
         <ThemeProvider>{children}</ThemeProvider>
       </Provider>
     );
-  };
+  }
 
   const component = render(Component, {
     wrapper: Providers
diff --git a/app/javascript/theme-provider.jsx b/app/javascript/theme-provider.jsx
index b9f21db03a..485efee0fe 100644
--- a/app/javascript/theme-provider.jsx
+++ b/app/javascript/theme-provider.jsx
@@ -20,7 +20,7 @@ export const DispatchContext = createContext(() => {});
 
 DispatchContext.displayName = "ThemeDispatchContext";
 
-const ThemeProvider = ({ children }) => {
+function ThemeProvider({ children }) {
   const directionFromStore = useMemoizedSelector(state => getAppDirection(state));
 
   const [options, dispatch] = useReducer((state, action) => {
@@ -82,7 +82,7 @@ const ThemeProvider = ({ children }) => {
       </MuiThemeProvider>
     </StyledEngineProvider>
   );
-};
+}
 
 ThemeProvider.propTypes = {
   children: PropTypes.node