PROBLEM WITH REACT friendbill VARIEBLE RETURNS [closed]

Here is the code and the problem, whenever I choose "user" and then pass all the neded value friendBill returns null for some reason and I cant understand why. I can see it in that line console.log(friendBill); Someone please explain that to me.

function SplitBillPanel({friend, setBalance}){const [whoPaying, setWhoIsPaying] = useState("user");const [friendBill, setFriendBill] = useState("");const [userBill, setUserBill] = useState(null);const [bill, setBill] = useState(null);let value = bill ? bill-userBill : "";

function handleSubmit(e){e.preventDefault();if(whoPaying === "user"){

  console.log(friendBill);  setBalance(friendBill)}else if(whoPaying === "friend"){  setBalance(-userBill)}

}

return(

SPLIT A BILL WITH {friend.name}

<label>💰 Bill value</label><input type="text" value={bill} onChange={(e)=>setBill(Number(e.target.value))}/><label >Your expenses</label><input type="number" value={userBill} onChange={(e)=>setUserBill(Number(e.target.value) > bill ? value : Number(e.target.value))}/><label >{friend.name}'s expense</label><input type="text" value={value} onChange={(e)=>setFriendBill(Number(e.target.value))} disabled/><label>Who is paying the bill?</label><select onChange={(e)=>setWhoIsPaying(e.target.value)}><option value="user">You</option><option value="friend">{friend.name}</option></select><Button>Split Bill</Button></form>

)}