Logical AND (&&) and OR (||) operators confusion

I’m still getting confused with the logical operator. My case is that I’m using React.js component such as below:

const Component = () => {
   const [data, setData] = useState({
      date: "",
      value: "",
   })

   const [disabled, setDisabled] = useState(true);

  useEffect(() => {
    if (data.date !== "" && data.value !== "") {
      setDisabled(false);
    } else if (data.date === "" || data.value === "") {
      setDisabled(true);
    }
  }, [data.date, data.value]);

  return <Button disabled={disabled} />
}

So my case here is that I have a state consisting of date and value where I receive an input from a user. If the input for one of the state (date or value) is empty, I want the button to be disabled. From my understanding, the logical operator should be correct. What happens right now is that the Button will be enabled once both input has been filled. However, if I emptied one of the field, it doesn’t get disabled. Only when I empty both input field then Button would get disabled. What am I doing wrong here? Thank you so much in advance