V0 `FormField` has some usages, from simple to complex, which we are trying to create a *shim* to support the migration to V9 using `Field`. We need some orientation on how to best do it for some cases, since the V9 `Field` is tighted to the possible inputs available in V9, making it difficute to use it together with custom inputs.

I have made [this Codesandbox](https://codesandbox.io/s/v0-formfield-usages-1vx10l) with few V0 `FormField` usages, where we have the custom `control` component is where our questions are. There's no straightfoward way to use `useField` and build it to be that generic in the current implementation. we have started the idea of a shim that looks like the following:

import * as React from 'react';
import { useField_unstable, useFieldStyles_unstable, renderField_unstable } from '@fluentui/react-field';
import { FieldPropsWithOptionalComponentProps } from '../../components/Field/Field.types';
interface CustomInputFieldProps {
  errorMessage?:
    | {
        content: string;
      }
    | string;
  required?: boolean;
  control: {
    content: React.ReactNode;
  };
  label: React.ReactElement | { content: React.ReactElement };
}
const DummyVoidFunctionComponent: React.VoidFunctionComponent<
  Pick<
    React.HTMLAttributes<HTMLElement>,
    'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'
  >
> = () => {
  return null;
};
const CustomInputField = React.forwardRef<HTMLInputElement, CustomInputFieldProps>((props, ref) => {
  const { errorMessage, required, control, label } = props;
  const fieldProps: FieldPropsWithOptionalComponentProps<typeof DummyVoidFunctionComponent> = { required: required };
  if (errorMessage) {
    fieldProps.validationState = 'error';
    if (typeof errorMessage === 'object') {
      fieldProps.validationMessage = errorMessage.content;
    }
    if (typeof errorMessage === 'string') {
      fieldProps.validationMessage = errorMessage;
    }
  }
  if (label) {
    if (label.content) {
      fieldProps.label = label.content;
    } else {
      fieldProps.label = label;
    }
  }
  fieldProps.control = { children: () => control.content };
  const state = useField_unstable(fieldProps, ref, {
    component: DummyVoidFunctionComponent,
    classNames: {
      root: 'foo',
      control: 'foo',
      hint: 'foo',
      label: 'foo',
      validationMessage: 'foo',
      validationMessageIcon: 'foo',
    },
  });
  useFieldStyles_unstable(state);
  return renderField_unstable(state);
});

// Usage
export const CustomInput = () => (
  <CustomInputField
    required
    errorMessage={{ content: 'This is an error message' }}
    control={{ content: <input type="text" /> }}
    label="This is a label"
  />
);

We are trying to figure out if that is the best way to keep the refactor and how do we want to support those cases.