Custom React file select component

FileInput.tsx

import * as React from 'react';

interface Props extends React.HTMLProps<HTMLInputElement> {
  onFileSelect: (file: File) => void;
}

const FileInput = ({ onFileSelect, ...props }: Props) => {
  const inputRef = React.useRef<HTMLInputElement>();

  const onChange = (event: React.ChangeEvent) => {
    const fileInput = event.target as HTMLInputElement;
    const file = fileInput.files && fileInput.files[0];

    if (!file) {
      return;
    }

    onFileSelect(file);
    inputRef.current.value = ''; // Reset input value
  };

  const onClick = () => {
    if (inputRef.current) {
      inputRef.current.click();
    }
  };

  return (
    <>
      <button onClick={onClick}>Select a file</button>
      <input
        {...props}
        type={'file'}
        onChange={onChange}
        style={{ display: 'none' }}
        ref={inputRef}
      />
    </>
  );
};

export default FileInput;