I want to use a MUI file upload Button in React-Hook-Form. When a file passing all validations is selected, the file name needs to be shown next to the Button. Also, following 3 validations are required.

const [file, setFile] = useState(null); <Grid xs={8}> <Typography sx={{ fontWeight: ‘bold’ }}>Upload File</Typography> <FormControl size=”small” sx={{ mr: 2 }}> <Button component=”label” variant=”contained”>Choose File <input type=”file” hidden required accept=”.pdf,image/gif,image/jpeg,image/png,image/tiff” /> </Button> </FormControl> {file && <FormLabel>{file.name}</FormLabel>} </Grid> I want to integrate react-hook-form with my custom mui file upload button. When a file is selected, the file name […]