[SUGGESTION] Create a File Control component

[Byevenes]

import React, { ChangeEvent, ForwardedRef, useRef } from 'react'
import { EditIcon } from '@chakra-ui/icons'
import { Button, ButtonProps, InputGroup } from '@chakra-ui/react'
import { useField } from 'formik'

import { SUPPORTED_FORMATS } from 'utils/yup'

import FormControl, { BaseProps } from '../FormControl'

type FileUploadProps = {
  accept?: string
  multiple?: boolean
}

export type FileControlProps = BaseProps & FileUploadProps & { buttonProps?: ButtonProps };

export const FileControl: React.FC<FileControlProps> = React.forwardRef(
  (props: FileControlProps, ref: ForwardedRef<HTMLInputElement>) => {
    const { name, label, buttonProps, multiple = false, accept = SUPPORTED_FORMATS.join(' ,'), ...rest } = props
    const [{ onChange, ...field }, , { setValue }] = useField(name)
    const inputRef = useRef<HTMLInputElement | null>(null)

    const handleClick = () => {
      inputRef.current?.click()
    }

    const handleChange = (value: ChangeEvent<HTMLInputElement>) => {
      value.target.files && setValue(value.target.files?.[0])
    }

    return (
      <FormControl name={name} label={label} {...rest} {...ref}>
        <InputGroup onClick={handleClick}>
          <input
            onChange={handleChange}
            type='file'
            accept={accept}
            multiple={multiple}
            id={name}
            ref={inputRef}
            hidden />
          <Button w={'full'} variant={'secondary'} {...buttonProps} {...field} leftIcon={<EditIcon />} isLoading={false} paddingX={24}>
            {'Adjuntar'}
          </Button>
        </InputGroup>
      </FormControl>
    )
  }
)

export default FileControl