Hello, so this is a Next.js app I'm building. I have two input fields and I'm converting units of crypto entered into the first input field and calculating a price. It works the other way around to, so if you enter 100 in the second input field, it gives how much of that crypto you would have.

I'm using the useState hook for the price and the useEffect hook for the API call.

The problem is that the last value entered always displays as NaN. For example, if I load the app, and enter 1 into the first input field, it will display the correct price in the second field but the 1 disappears and displays NaN.

I've narrowed it down to this function:

function handleInput(e) {
if (e.key === "Enter") {
e.preventDefault();

const inputOneValue = document.getElementById("inputOne").value;
const inputTwoValue = document.getElementById("inputTwo").value;

const convertedInputOneValue =
parseFloat(inputTwoValue) / parseFloat(price);
const convertedInputTwoValue =
parseFloat(inputOneValue) * parseFloat(price);

document.getElementById("inputOne").value =
convertedInputOneValue.toFixed(2);

document.getElementById("inputTwo").value =
convertedInputTwoValue.toFixed(2);
}
}

More specifically, I think it has to do with a line like const inputOneValue = document.getElementById("inputOne").value; because if I add || 0 to the end, the NaN stops displaying and the problem becomes a 0 displays instead of NaN.

I've spent hours on this, so any help would be greatly appreciated!