Answers

1. The generic type must be defined in the component function as well as the prop:

   export function Select<TOption>({

     options,

     value,

     label,

   }: Props<TOption>) {

     return ...

   }

2. The keyof operator can be used to ensure value and label are keys in options:

   type Props<TOption> = {

     options: TOption[];

     value: keyof TOption;

     label: keyof TOption;

   };

3. The consumer is likely to need the data for the option, so the prop should be a function containing the data as a parameter:

   type Props<TOption> = {

     ...,

     renderOption: (option: TOption) => ReactNode;

   };

   export function Select<TOption>({

     options,

     value,

     label,

     renderOption,

   }: Props<TOption>) {

     return (

       <div>

         <input />

         {options.map((option) =>...