How to use the react-final-form.useField function in react-final-form

export default function ResourceLink({ reference, source, dest, children }) {
  // const form = useForm();
  // const localValue = form.getFieldState(source);
  const localValue = useField(source);
  const query = encodeURIComponent(
    JSON.stringify({
      [dest]: localValue.input.value
    })
  );
  const title = titleize(reference);
  return (
    <button label="{`Add">
      {children}</button>

const CheckboxArrayControl = ({ name, value, children }) => {
  const {
    input: { checked, ...input },
    meta: { error, touched }
  } = useField(name, {
    type: 'checkbox', // important for RFF to manage the checked prop
    value // important for RFF to manage list of strings
  })
  return (
    
      {children}
    
  )
}

// visuals
  name,
  label,
  inverseLabel,
  inverseColor = 'black',
  className,

  //
  disabled = false,

  ...rest
}) {
  const {
    input,
    meta: { submitting, submitSucceeded },
  } = useField(name, { type: 'checkbox' });

  disabled = disabled || submitting || submitSucceeded;

  return (
    
      {/* we totally hide the checkbox itself */}

id,
    name,
    source,
    validate,
    onBlur: customOnBlur,
    onChange: customOnChange,
    onFocus: customOnFocus,
    ...options
}: InputProps): ComputedInputProps => {
    const finalName = name || source;

    const sanitizedValidate = Array.isArray(validate)
        ? composeValidators(validate)
        : validate;

    const { input, meta } = useFinalFormField(finalName, {
        initialValue: defaultValue,
        validate: sanitizedValidate,
        ...options,
    });

    // Extract the event handlers so that we can provide ours
    // allowing users to provide theirs without breaking the form
    const { onBlur, onChange, onFocus, ...inputProps } = input;

    const handleBlur = useCallback(
        event => {
            onBlur(event);

            if (typeof customOnBlur === 'function') {
                customOnBlur(event);
            }

export default function SelectInput({
  name,
  label,
  placeholder,
  className,
  mono = false,
  options = [],
  disabled = false,
  warning,
}) {
  const {
    input,
    meta: { active, error, submitting, submitSucceeded, touched, valid },
  } = useField(name, {
    type: 'select',
  });

  disabled = disabled || submitting || submitSucceeded;

  const [isOpen, setIsOpen] = useState(false);
  const ref = useRef();

  // close select on outside clicks
  useOnClickOutside(ref, useCallback(() => setIsOpen(false), [setIsOpen]));

  const toggleOpen = useCallback(() => {
    input.onFocus();
    setIsOpen(isOpen => !isOpen);
  }, [input]);

choice,
    optionText,
    optionValue,
    source,
    translateChoice,
}) => {
    const { getChoiceText, getChoiceValue } = useChoices({
        optionText,
        optionValue,
        translateChoice,
    });
    const label = getChoiceText(choice);
    const value = getChoiceValue(choice);
    const {
        input: { type, onChange, ...inputProps },
    } = useField(source, {
        type: 'radio',
        value,
    });

    const nodeId = `${source}_${label}`;

    return (
         onChange(value)}
                    {...inputProps}

export default function UploadInput({ name, label, ...rest }) {
  const {
    input,
    meta: { validating, submitting, touched, active, error },
  } = useField(name, { type: 'text' });

  const handleUpload = useCallback(
    element => {
      input.onFocus();

      const file = element.files.item(0);
      const reader = new FileReader();

      reader.onload = e => {
        input.onChange({ target: { value: e.target.result } });
      };

      const failure = _ => {
        input.onBlur();
      };

const EventsSelectField: FunctionComponent = ({ settings }) => {
  const { input: all } = useField("all");
  const { input: events, meta } = useField("events", {
    validate: validateEventSelection,
  });

  const onClear = useCallback(() => {
    if (all.value) {
      all.onChange(false);
    } else {
      events.onChange([]);
    }
  }, [all, events]);

  const onCheckChange = useCallback(
    (event: WEBHOOK_EVENT_NAME, selectedIndex: number) => () => {
      const changed = [...events.value];
      if (selectedIndex >= 0) {

export function PointInput({ name, size = 4, ...rest }) {
  const {
    input: { value },
    meta: { active, valid, error },
  } = useField(name, {
    subscription: { value: true, active: true, valid: true, error: true },
  });

  return (

const Chip = ({ onDelete, disabled, name }) => {
  const { input } = useField(name, { subscription: { value: true } });
  return (
    
      {input.value}
      
        ✗
      
    
  );
};