我想运行下面的代码，让文件选择器输入一个文件，并将输入文件作为文件中的状态进行管理。但它会产生注解中所述的输出。我不知道原因。我应该如何解决这个问题？

const [file, setFile] = useState<File | null>(null);

const fileSelect = (event: ReactChangeEvent<HTMLInputElement>) => {
  if (event.target.files === null) { return ; }
  const f: File | null = event.target.files[0];
  console.log(typeof(f)); // <- object
  setFile(f);
  console.log(f); // <- null
}

return (
<div className="flex px-1">
<input
  onChange={fileSelect}
  type="file"
/>
</div>
);