Why isn't setState list refreshing immediately in the front

Question

I'm having this issue: I've created a functional component where files are added into a list through an input file: part of my hook code:

const [list, setList] = useState<FileProps[]>([]);
const [file, setFile] = useState<File | undefined>();
const addToList = (file: File) => {
  setList([
    ...list,
    {
      base64: "",
      name: get(file, "name", ""),
      type: get(file, "type", ""),
    },
  ]);
};
const handleChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
  setFile(e.target.files![0]); // invoking this setState, change is showed immediately in the front
  addToList(e.target.files![0]); // invoking this setState, change is NOT showed immediately in the front, I mean, I have to make a little change (add an space in the html part maybe) and wait Webstorm updates the page and then I can see the list in the front.
};

the front part:

const { inputFileRef, handleChangeFile, list, file } =
  useFileAttachmentState(props);
return (
  <>
    {get(file, "name","No file picked yet")}
    {
       !isEmpty(list) && (<>List is not empty</>)
    }
  </>
);

I don't have more ideas how to solve this problem :(

I'm trying to get the list updated and refreshed in front as soon as I modify its state