Use user input for multiple calculations in a component

I’m trying to use a user inputted number for multiple calculations in a component. I am able to use the input for the first calculation (deckboards) but not for the others. For example, newArea / 0.145 is output. But the next calculation for joists (newArea / 0.45) is not output, and neither are the following calculations. Any help would be much appreciated!

import { useState } from "react";
import AddPercent from "./AddPercent";

const Counter = () => {
  const [area, setArea] = useState("");
  const newArea = (e) => {
    const value = e.target.value;
    const deckCalc = deckBoards(value);
    setArea(deckCalc);
  };

  const deckBoards = (newArea) => {
    return (newArea / 0.145).toFixed(2);
  };
  const joists = (newArea) => {
    return (newArea / 0.45 + 1).toFixed(2);
  };
  const sixMJoists = (joists) => {
    return (joists / 6).toFixed(2);
  };
  const fourMJoists = (joists) => {
    return (joists / 4.8).toFixed(2);
  };
  const screws = (joists) => {
    return (joists * 13.2).toFixed(0);
  };

  return (
    <div label="Deck">
      <h2>Total area of deck</h2>
      Area
      <input
        placeholder="Enter area here"
        type="text"
        onChange={newArea}
        type="number"
      />
      <br />
      <h2>Deck boards</h2>Deck boards at 140mm wide : {area} lineal metres
      <AddPercent />
      <br />
      <h2>Joists</h2>Joists based on 450mm spacing : {joists} lineal metres
      <p>Which is equal to this many 6m lengths : {sixMJoists}</p>
      <p>or</p>
      <p>This many 4.8m lengths : {fourMJoists}</p>
      <AddPercent />
      <br />
      <h2>Screws</h2>Number of screws needed : {screws}
      <AddPercent />
    </div>
  );
};