Fix errors from props on HTML elements

components/JobSection/index.tsx

@@ -127,6 +127,26 @@ const JobSection = (props: Props) => {
     props.saveSkill(skill, position)
   }
 
+  const emptyJobLabel = (
+    <div className="JobName">
+      <h3>{t('no_job')}</h3>
+    </div>
+  )
+
+  const filledJobLabel = (
+    <div className="JobName">
+      <img
+        alt={job?.name[locale]}
+        src={`/images/job-icons/${job?.granblue_id}.png`}
+      />
+      <h3>{job?.name[locale]}</h3>
+    </div>
+  )
+
+  function jobLabel() {
+    return job ? filledJobLabel : emptyJobLabel
+  }
+
   // Render: JSX components
   return (
     <section id="Job">
@@ -146,13 +166,7 @@ const JobSection = (props: Props) => {
             ref={selectRef}
           />
         ) : (
-          <div className="JobName">
+          jobLabel()
-            <img
-              alt={party.job.name[locale]}
-              src={`/images/job-icons/${party.job.granblue_id}.png`}
-            />
-            <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
-          </div>
         )}
 
         <ul className="JobSkills">

components/SelectItem/index.tsx

@@ -11,7 +11,7 @@ interface Props extends ComponentProps<'div'> {
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
-  { children, ...props },
+  { children, value, iconSrc, altText, ...props },
   forwardedRef
 ) {
   return (
@@ -19,9 +19,9 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       className={classNames('SelectItem', props.className)}
       {...props}
       ref={forwardedRef}
-      value={`${props.value}`}
+      value={`${value}`}
     >
-      {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
+      {iconSrc ? <img alt={altText} src={iconSrc} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )