How to use the reakit/Form.unstable_useFormState function in reakit

avatar,
  isPro,
  isTeam,
  name,
  username,
  bio,
  associations,
  socialLinks,
  isEditing = false,
  canEdit = true,
  toggleEditing,
  onEdit,
  children,
}) => {
  const initialValues = { bio, socialLinks };
  const form = useFormState({
    values: initialValues,
    onValidate: validateWithYup,
    onSubmit: (values: Values) => {
      values.socialLinks = values.socialLinks.filter((link: string) => link);
      // onEdit(values)
      toggleEditing();
    },
  });

  const reset = () => {
    form.reset();
    toggleEditing();
  };

  // TODO:
  // - Need support for uploading Team Avatars

const [svgCode, setSVGCode] = useState([])

  const onSubmit = async (values, code) => {
    code.map(async c => {
      const svgoCode = await svgo(c.svg)
      const transformedCode = await svgr(svgoCode, values, {
        componentName: values.name
      })
      const prettierCode = prettier.format(transformedCode, {
        parser: 'babel'
      })
      setJSCode(jsCode => jsCode.concat({ name: c.name, svg: prettierCode }))
    })
  }

  const form = useFormState({
    values: { native: false, name: 'Icon', icon: false, jsx: false }
  })

  function setupReader(file) {
    // eslint-disable-next-line
    var reader = new FileReader()
    reader.onload = function() {
      const binaryStr = reader.result
      setSVGCode(svgCode => svgCode.concat({ svg: binaryStr, name: file.name }))
    }
    reader.readAsBinaryString(file)
  }

  const onDrop = acceptedFiles => {
    setSVGCode([])
    setJSCode([])

export const SearchInput: React.FC = ({
  name = `query`,
  placeholder = `Search`,
  onChange = () => {},
  onValidate,
  onSubmit,
  ...props
}) => {
  const form = useFormState({ values: { [name]: '' }, onValidate, onSubmit });

  useEffect(() => {
    onChange(form.values);
  }, [onChange, form.values]);

  return (
    
      <input placeholder="{placeholder}" name="{name}">
      
        
      
    
  );
};

export default () => {
  const [jsCode, setJSCode] = useState()
  const form = useFormState({
    values: { svgCode: '', native: false, name: 'Icon', icon: false },
    onValidate: values => {
      if (!values.svgCode) {
        const errors = {
          svgCode: 'You need to paste some SVG code'
        }
        throw errors
      }
    },
    onSubmit: async values => {
      const svgoCode = await svgo(values.svgCode)
      svgr(svgoCode, values, { componentName: values.name }).then(
        async code => {
          setJSCode(
            prettier.format(code, {
              parser: 'babel'