React useEffect only on Update

const UseEffectUpdates = () => {    const[ txtValue, setTxtValue] = useState({        value1:"",        value2:""    })    const [txtColor, setTxtColor] = useState("white");    const [toggle, setToggle] = useState(true);    const didMount = useRef(false);    const handleToggle = () => {        setToggle(!toggle);    };    const txtChange1 = (event)=>{        event.preventDefault();        console.log("textbox change 1");        setTxtValue({...txtValue, value1:event.target.value});        if (txtValue.value2 ===  event.target.value){            setTxtColor("green");        }    }    const txtChange2 = (event)=>{        event.preventDefault();        console.log("textbox change 2");        setTxtValue({...txtValue, value2:event.target.value})        if(txtValue.value1 === event.target.value){            setTxtColor("green")        }    }    useEffect(() => {        if (didMount.current) {        console.log('I run only if toggle changes.');        } else {        didMount.current = true;        }    }, [toggle]);    return (        <div>            <input style={{backgroundColor:txtColor}} type="text"  placeholder="name1" onChange={txtChange1}  value={txtValue.value1}/>            <br/>            <input style={{backgroundColor:txtColor}} type="text"  placeholder="name2" onChange={txtChange2}  value={txtValue.value2}/>            <br/>            <button type="button" onClick={handleToggle}>                Toggle            </button>                </div>    );};