Add arbitrary "override" value to value display

[okbytes]

I've got a tricky UI design to implement and I'm failing to understand how to make it work with react-select in TypeScript.

I've gotten as far as this first screenshot. It shows a normal Select with styled group options. I've been able to patch together a customized MenuList component to get the bottom floating row/button that triggers a dialog for the user to enter their text string.

The result of the user completing the custom text string flow is that string is now displayed in the select like below.

The little Chip can be clicked to edit the string in a dialog, but its value is otherwise disconnected from the Select's options list. The string acts as an "override" on what would otherwise but a normal field selection from the options list. What has been emphasized by the designer is that clicking the Select box (not the Chip) and typing will resume normal Select usage. So, my thought is I can't totally do a wholesale component swap because I still need all the goodies of the Select at hand.

I'm encountering some difficulty in how to bring these types (and disparate data) together in one place. With the string being introduced (and set outside react-select), I can't figure out how to show a custom value display while also letting react-select know the value is the string (or undefined, I guess?). I can pass boolean flags to the Select because I'll know when it's a string override or a regular Field. Maybe that's useful?

[okbytes]

I solved this by using a custom object { overrideValue: string } instead of a string. I then made a union type type ValueType = Field | { overrideValue: string } and passed that to the various customized components (Control, SingleValue, etc).