React Material UI- make a button open a file picker window

I have a styled Material UI button component. I want to make it so when I click the styled button I can select a file on my computer.

I thought this could be done by placing the <Button></Button> inside the <label> for a <input type="file"/> (file input) element. But this only seems to work with divs and not buttons. I can neither get the file picker to open for a regular button element nor a material UI Button component.

How can I make a material ui Button act as the label for the file input?

import React from 'react';

import { Button } from '@material-ui/core';
export default function InputButton() {
  return (
    <div>

    {/* Button does not open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <Button>upload file</Button>
        </label>
      </div>

    {/* div does open file picker window */}
      <div>
        <label>
          <input type="file" style={{ display: 'none' }} />
          <div>upload file</div>
        </label>
      </div>

    </div>
  );
}