Component Rerendering On Change NextJS - reactjs

Question

I have a simple input with an onchange function that takes the value and sets the state for whichever one I want. I have used an input onChange before in other parts of the code, but this issue has never happened before. Every time I would type in a number in the input, it deselects the input and doesn't let me input anymore. This is the code for the input including the state set;=
const [calc, setCalc] = useState("");
const [iotInitial, setIotInitial] = useState(0);
const [iotCont, setIotCont] = useState(0);
const [iotGrowth, setIotGrowth] = useState(0);
const [iotSubmit, setIotSubmit] = useState(false)
const Calculator = () => {
if (calc === "1") {
return (
<div className="text-black p-2">
<h1 className="text-lg">Investment Over Time</h1>
<div className="">
<div className="flex flex-wrap gap-x-5">
<div className="flex flex-col">
<label>Initial Investment</label>
<input defaultValue={iotInitial} value="initial" type="number" className="rounded" onChange={(e) => setIotInitial(e.target.value)}/>
</div>
<div className="flex flex-col">
<label>Contributions (monthly)</label>
<input defaultValue={iotCont} value="cont" type="number" className="rounded" onChange={(e) => setIotCont(e.target.value)}/>
</div>
<div className="flex flex-col">
<label>Growth Time (years)</label>
<input defaultValue={iotGrowth} value="growth" type="number" className="rounded" onChange={(e) => setIotGrowth(e.target.value)}/>
</div>
<button className="bg-blue-300 hover:bg-blue-500 px-5 rounded" onClick={() => {setIotSubmit(true)}}>
Submit
</button>
</div>
{iotSubmit &&
<div>
{iotInitial}
{iotCont}
{iotGrowth}
</div>
}
</div>
</div>
);
} else if (calc === "2") {
return (
<div className="text-black p-2">
<h1 className="text-lg">Risk Analysis Using Average True Range</h1>
<p>Coming Soon</p>
</div>
);
} else if (calc === "3") {
return (
<div className="text-black">
<h1 className="text-lg">Hello</h1>
<p>{calc}</p>
</div>
);
}
};
This component keep rerendering and I don't know why. Any help would be useful.

Answer 1

you use value="initial" which is a string and what you should do is
...
<input
defaultValue="0"
value={iotCont}
type="number"
onChange={(e) => setIotCont(e.target.value)}
/>
...
The problem is that input uses value attribute as what it is gonna display
or you may simply remove value from your input to make it one way binding