Mi estado debería volver a renderizar todo el componente y debería poner mi otro estado en valor predeterminado de nuevo, pero no está sucediendo.

Importa React desde “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>Ingrese la medida r del círculo a continuación en cm</h4>

        <input onchange="{getInput}" type="number" name="input">

        <button onclick="{calculation}">Mostrar Área</button>

        El área del círculo es: {value}
    </div>

)

}

Entonces, cada vez que ingreso un número, mi componente se vuelve a renderizar (lo comprobé con un registro en la consola), pero mi valor de salida, que es un valor de estado (El área del círculo es: {value}), sigue apareciendo en la página. En lugar de eso, cuando el componente se vuelve a renderizar, debe asignarse como “” de nuevo. Pero no está sucediendo y mi código funciona bien. Solo quiero entender cómo es posible.