フォームに入力した数値を計算して出力したい

実現したいこと

ボタンをクリックするたびに、フォームに入力した値にその値を足した結果を出力したい。

例
フォームに数値500を入力。
ボタンをクリックするとまずは500を表示。
もう一度ボタンをクリックすると1000を表示。

などとボタンを押下するたびに入力した値＋入力した値を表示したい。

試したこと

'use client' import React, { useState } from 'react' const page = () => { const [form, setForm] = useState(); const [calc, setCalc] = useState(0); const handleCalc = () => { setCalc(calc + form); } const handleForm = (e) => { e.preventDefault(); } return ( <div> <h1>{calc}</h1> <form onSubmit={handleForm}> <input type="text" onChange={e => setForm(e.target.value)} /> <button onClick={handleCalc}>+</button> </form> </div> ) } export default page

のようにすると、フォームに入力された値が文字列のように連結されて表示されてしまう。

例
フォームに500を入力。
ボタンを押すと、初期値の0に500が連結して表示される。
以後ずっと500が連結

わかる方、ぜひ教えていただきたいです。
よろしくお願いします。