React number validation and update state after submitting number input, not onChange

I had some issues with some checks when I update number values in a state through a number input.

I'm working on a 3Dconfigurator in React Three Fiber and want to make my room size variable through my sidepanel. Global states are updated in a zustand store and that works fine, but I keep having issues with the checks I want to run on my values. I can only get them to run on change, which prevents me from updating the numbers properly.

How can I update the state and run the checks only after leaving the input fields?
I already researched onSubmit and onBlur but those seemed not to work...

Thank you all in advance!

import { useAppStore } from "@/stores/appStore";

const Roomdimensions = () => {
  const update = useAppStore((state) => state.update);
  const room = useAppStore((state) => state.room);

  const changeRoom = () => {
    let roomwidth = document.querySelector("#width").value;
    let roomheight = document.querySelector("#height").value;
    let roomdepth = document.querySelector("#depth").value;

    if (roomwidth < 100 || roomwidth > 1200) {
      update({
        room: { width: 300, height: roomheight, depth: roomdepth },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room width must be between 100cm and 1200cm",
      });
    }
    if (roomdepth < 100 || roomdepth > 1200) {
      roomdepth = 300;
      update({
        room: { width: roomwidth, height: roomheight, depth: 300 },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room depth must be between 100cm and 1200cm",
      });
    }

    if (roomheight < 180 || roomheight > 300) {
      roomheight = 210;
      update({
        room: { width: roomwidth, height: 210, depth: roomdepth },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room height must be between 180cm and 300cm",
      });
    }

    const room = {
      width: roomwidth,
      height: roomheight,
      depth: roomdepth,
    };
    update({ room });
  };

  return (
    <div className="room">
      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--width">Width:</label>
          <input
            type="number"
            name="room--width"
            id="width"
            value={room.width}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 100cm / max. 1200cm</small>
      </div>

      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--height">Height:</label>
          <input
            type="number"
            name="room--height"
            id="height"
            value={room.height}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 160cm / max. 300cm</small>
      </div>

      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--depth">Depth:</label>

          <input
            type="number"
            name="room--depth"
            id="depth"
            value={room.depth}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 100cm / max. 1200cm</small>
      </div>
    </div>
  );
};

export default Roomdimensions;

onBlur did the trick just fine, just not while updating all three of the dimensions at once.

Thank you @LynnC. to make me check out onfocusout and get back on track with researching the bug.