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