() => {
  const [fileName, setFileName] = React.useState("scannedPhoto.pdf");
  const fileTypes = ".png,.jpg,.jpeg,.webp";
  return (
    <InputFile
      error={
        fileName.endsWith(".pdf")
          ? `The selected file is not one of the supported types (${fileTypes})`
          : ""
      }
      help={`Select a photo in one of the following types: ${fileTypes}`}
      label="Profile photo" // @ts-expect-error type
      onChange={(event) => setFileName(event.target.files[0].name)}
      onRemoveFile={() => setFileName("")}
      fileName={fileName}
      placeholder="No photo selected"
      buttonLabel="Select photo"
      allowedFileTypes={fileTypes}
    />
  );
};