Custom select using react-select + react-final-form

customSelect.jsx

import React from "react";
import { FieldRenderProps } from "react-final-form";
import Select, { ValueType } from "react-select";

type Option = {
  label: string;
  value: string;
};

// as seen here https://stackoverflow.com/a/66746766/5763750

export const CustomSelect = ({ input, options, ...rest }: FieldRenderProps<string, HTMLElement>) => {
  const handleChange = (option: ValueType<Option, false>) => {
    input.onChange(option?.value);
  };

  return (
    <Select
      {...input}
      {...rest}
      onChange={handleChange}
      options={options}
      value={options ? options.find((option: Option) => option.value === input.value) : ""}
    />
  );
};

export default CustomSelect;