Why do this factory pattern instead of using the component directly? I assume it's for the types?

Yep, exactly - sets things up so the compiler knows the formFieldName can only be a few possibilities:

And if I introduce a typo - or the schema of the types changes - VSCode lets me know:

There's also some more backstory here: https://github.com/coder/m/pull/7766 - it's a pattern @vapurrmaid introduced there that we've been leveraging for all our forms.

formik out of the box is very loose with type safety - there's a lot of any's in their type definitions: https://github.com/jaredpalmer/formik/blob/e677bea8181f40e6762fc7e7fb009122384500c6/packages/formik/src/types.tsx#L6

I regressed some code early on (one of my first PRs): https://github.com/coder/m/pull/9609- if that component had used this, it would've been caught at compile time

Also, one thing on our mind is how to accomplish this type-safety w/o a higher-order component - there may be a way to simplify this, esp with newer typescript versions

Actually... sorry for this rambling thread... I experimented and it seems we may be able to move away from the higher-order component today w/ our current TS version: #70 🤔

Merged #70 and refactored so that FormDropdownField doesn't need a HoC either in 458703e ... and still get type safety!