how can i update the first non-empty value on setstate with react?

Since the setState function is asynchronous, you cannot use the state value item right after you fire the setItem(...). To ensure you get the latest value for your addItem function:

setItem((prevState) => {
  const newItem = { ...prevState, plate: value };
  addItem(newItem); // Now, it's getting the updated value!
  return newItem;
});

And regarding the controlled and uncontrolled components, you can read the docs about it here. To fix your problem, you can initialize the value state with an empty string:

const [value, setValue] = useState('');