From ba74a467689f5225ec1f8286117187460a6bf4ea Mon Sep 17 00:00:00 2001
From: Ai Ling <hong-ailing@hotmail.com>
Date: Wed, 12 Oct 2022 21:27:39 +0800
Subject: [PATCH] [offers][fix] Fix console warnings

---
 apps/portal/src/components/offers/Breadcrumb.tsx           | 4 ++--
 .../src/components/offers/forms/OfferDetailsForm.tsx       | 6 ++----
 .../offers/forms/components/FormMonthYearPicker.tsx        | 7 ++++++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/components/offers/Breadcrumb.tsx b/apps/portal/src/components/offers/Breadcrumb.tsx
index 9700e486..899d6f9e 100644
--- a/apps/portal/src/components/offers/Breadcrumb.tsx
+++ b/apps/portal/src/components/offers/Breadcrumb.tsx
@@ -7,7 +7,7 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
   return (
     <div className="flex space-x-1">
       {stepLabels.map((label, index) => (
-        <>
+        <div key={label}>
           {index === currentStep ? (
             <p className="text-sm text-purple-700">{label}</p>
           ) : (
@@ -16,7 +16,7 @@ export function Breadcrumbs({ stepLabels, currentStep }: BreadcrumbsProps) {
           {index !== stepLabels.length - 1 && (
             <p className="text-sm text-gray-400">{'>'}</p>
           )}
-        </>
+        </div>
       ))}
     </div>
   );
diff --git a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
index 9f17e221..ffdbecd5 100644
--- a/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/forms/OfferDetailsForm.tsx
@@ -430,16 +430,14 @@ function OfferDetailsFormArray({
     <div>
       {fields.map((item, index) => {
         return (
-          <>
+          <div key={item.id}>
             {jobType === JobType.FullTime ? (
               <FullTimeOfferDetailsForm
-                key={`offer.${item.id}`}
                 index={index}
                 setDialogOpen={setDialogOpen}
               />
             ) : (
               <InternshipOfferDetailsForm
-                key={`offer.${item.id}`}
                 index={index}
                 setDialogOpen={setDialogOpen}
               />
@@ -472,7 +470,7 @@ function OfferDetailsFormArray({
                 be reversed.
               </p>
             </Dialog>
-          </>
+          </div>
         );
       })}
       <Button
diff --git a/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx b/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx
index 62967117..2b6c414a 100644
--- a/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx
+++ b/apps/portal/src/components/offers/forms/components/FormMonthYearPicker.tsx
@@ -1,4 +1,5 @@
 import type { ComponentProps } from 'react';
+import { forwardRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
 import MonthYearPicker from '~/components/shared/MonthYearPicker';
@@ -14,7 +15,7 @@ type FormMonthYearPickerProps = Omit<
   name: string;
 };
 
-export default function FormMonthYearPicker({
+function FormMonthYearPickerWithRef({
   name,
   ...rest
 }: FormMonthYearPickerProps) {
@@ -35,3 +36,7 @@ export default function FormMonthYearPicker({
     />
   );
 }
+
+const FormMonthYearPicker = forwardRef(FormMonthYearPickerWithRef);
+
+export default FormMonthYearPicker;