Estoy aprendiendo React.js y no estoy seguro de lo que sucede aquí. Quiero tener una función que devuelva una cadena isWaterBoiling() según el valor de una variable. Luego, quiero representar esa cadena en la interfaz de usuario, pero recibo este error. No entiendo por qué sucede esto, no tiene sentido:

Advertencia: las funciones no son válidas como hijo de React. Esto puede suceder si devuelve un Componente en lugar de hacerlo desde el procesamiento. O tal vez quisiste llamar a esta función en lugar de devolverla. en div

Aquí está mi código:

 import { useState } from "react" const App = () => { const [celsius, setCelsius] = useState() const [fahrenheit, setFahrenheit] = useState() const calculateFahrenheit = newCelsius => { setCelsius(newCelsius) setFahrenheit(((newCelsius * 9 / 5) + 32).toFixed(2)) } const calculateCelsius = newFahrenheit => { setFahrenheit(newFahrenheit) setCelsius(((newFahrenheit - 32) * 5 / 9).toFixed(2)) } const isWaterBoiling = () => { return (parseFloat(celsius >= 100)) ? "boiling" : "not boiling" } return ( <div className="bg-gray-800 h-full text-gray-300 p-4 text-center"> <div className="font-semibold">Temperature Calculator</div> <div className="mt-4 space-y-4"> <div className="flex gap-3 items-center"> <span className="flex-[5] text-right">Celsius:</span> <input value={celsius} onChange={event => calculateFahrenheit(event.target.value)} className="flex-[7] bg-gray-700 rounded-sm py-1 px-3" type="text" /> </div> <div className="flex gap-3 items-center"> <span className="flex-[5] text-right">Fahrenheit:</span> <input value={fahrenheit} onChange={event => calculateCelsius(event.target.value)} className="flex-[7] bg-gray-700 rounded-sm py-1 px-3" type="text" /> </div> </div> <div className="mt-4 italic text-gray-400"> The water is { isWaterBoiling } </div> </div> ) } export default App