function running before call

Can someone explain why the following code is displaying "library empty"? I'm not changing the input nor clicking on it, I don't understand why the function is being run.

import './App.css'; 
import {useState} from 'react'

function App() {
  const [library, setLibrary] = useState()

  const handleFile = () => {
    if (library) console.log('library full')
    console.log('library empty')
  }


  return (
    <form>
      <label>
        <div className='btn-three'>
          Select Directory:
          <input type="file" onClick={handleFile()}/>
        </div>
      </label>


    </form>

  );
}

export default App;