Fix Placeholder Styling in CustomSelect

[ccatherinetan]

Currently, CustomSelect expects value: T as a prop, and styles the placeholder/value like so:

<P2 $color={COLORS.midgray}>
    {options.find(option => option.value === value)?.label || placeholder}
</P2>

Instead of searching through options to find the corresponding label, we should consider

1. typing value as DropdownOption<T> so we automatically have access to the label/value pair
2. making value optional, i.e. value: DropdownOption<T> | undefined so that we can have different styling for the Placeholder vs. the Selected Value (i.e. placeholder should be grey while value should be black).

Alternatively, we can just directly use/style Select from React-Select

This change would affect (i.e. CustomSelect is used in):

1. Onboarding (for the Review and Submit Screen)
   • no issues arise here b/c the value will always be non-null when a user reaches the review screen
2. PlantDetails, for the PlantingType input in Add Details Page
   • we're currently handling this by just passing in '' if there's no selected value yet
   • see line 141 of add-details/page.tsx

 <PlantDetails
              plant={plantsToAdd[currentIndex - 1]}
              date={details[currentIndex - 1].date_added ?? getDefaultDate()}
              plantingType={details[currentIndex - 1].planting_type ?? ''}
              onDateChange={date =>
                updateInput('date_added', date, currentIndex - 1)
              }
              onPlantingTypeChange={type =>
                updateInput('planting_type', type, currentIndex - 1)
              }
            />