delete an object prevents react component working

In my functional component, I have a state created with useState and pass it to another nested component as a prop. But I found a bug in my code that prevents react component from working or re-rendering.

Please see this block code to delete a parameter from the state object:

  const formHandler1 = (event: FormEvent<HTMLFormElement>) => {
    const { id } = event.target as HTMLElement;
    let newFormError = formError;
    if (id && Object.hasOwn(formError, id)) {
      delete newFormError[id]
      setFormError(newFormError);
    }
  };

The top function returns the output I want, but does not let my component re-render or change the props for the nested component.

Now see this code that has no problem and my code works perfectly:

const formHandler = (event: FormEvent<HTMLFormElement>) => {
    const { id } = event.target as HTMLElement;
    if (id && Object.hasOwn(formError, id)) {
      const { [id]: tmp, ...rest } = formError;
      setFormError(rest);
    }
  };

My state:

const [formError, setFormError]: [CutomObject, Dispatch<SetStateAction<CutomObject>>] = useState({});

I don't know why this code block behaves like this!

I really appreciate any help you can provide.