This onBlur is not working the way I want - reactjs

Question

Here I want this onBlur to show another text or input field which is working but whenever i clear the value it should be hiding but right now it is not working the way I want. In easy words whenever I enter content in input field and loose the focus it show sub input field but whenever clear it all it should be hiding but it is not working here is the code
<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
>
Email
</Typography>
<Input
fullWidth
name="email"
value={user.email}
onChange={handleChange}
disableUnderline={true}
onBlur={handleOTP}
className={classes.inputEmail}
endAdornment={
<>
{user.clearEmail ? (
<IconButton
onClick={() => clearValue("email", "clearEmail")}
>
<ClearIcon />
</IconButton>
) : (
""
)}
</>
}
/>
{showSecondInput && (
<>
<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
sx={{ mt: "15px" }}
>
Enter OTP
</Typography>
<Input
className={classes.inputEmail}
fullWidth
type="password"
/>
</>
)}
This is the states I have used
const [user, update_user] = useState({
user_name: "",
email: "",
clearUser: false,
clearEmail: false,
});
const clearValue = (key, show) => {
update_user({ ...user, [key]: "", [show]: false });
};
const [showSecondInput, setShowSecondInput] = useState(false);
const handleOTP = (e) => {
const { name:key } = e.target;
if(key === "email") setShowSecondInput({ ...showSecondInput, [key]: "", clearEmail: false });
};
const handleChange = (event) => {
const { name: key, value } = event.target;
if (value) {
if (key === "user_name")
update_user({ ...user, [key]: value, clearUser: true });
else if (key === "email")
update_user({
...user,
[key]: value,
clearEmail: true,
});
} else
update_user({
...user,
[key]: "",
clearUser: false,
clearEmail: false,
});
};
The clearValue function is working smoothly without any problem the problem is on blur event..

Answer 1

You could do this by checking for the name in case you have more onBlur with the handleOTP function. Then checking if the value is a empty string and based on that set the state.
const handleOTP = (e) => {
const { name, value } = e.target;
if (name !== "email") return;
if (value === "") {
setShowSecondInput(true);
} else {
setShowSecondInput(false);
}
};