我的狀態值應該重新渲染整個組件，這應該再次將我的其他狀態值設置為默認值，但它沒有發生

import React from "react"


export default function Components() {
    const PI = 3.14
     
    const [value, setValue] = React.useState("")
    const [inputvalue, setInputvalue] = React.useState(0)

    function calculation() { 
        const originalvalue = PI * inputvalue * inputvalue

        setValue(`${originalvalue} cm^2`)
        console.log(value)
    }
    
    function getInput (event) {
        setInputvalue(event.target.value)
        
    }   

    console.log("main")

    return (
        <div className="output">
            <h4>Enter the r of the circle below in cm</h4>
           
           <input onChange={getInput} type="number"  name="input"/>

           <button onClick = {calculation}> Show Area</button>

           <p>Area of the circle is : {value}</p>
        </div>

    )
}

因此，每當我輸入一個數字時，我的組件都會重新呈現（我用控制台日誌檢查過它），但我的輸出值是一個狀態值（圓圈的面積是：{value}）仍然保留在頁面上。相反，當組件重新渲染時，需要再次將其分配為“”。但它沒有發生，我的代碼運行良好。我只是想了解這怎麼可能