reactでフォームから入力された値を使って計算を行い、結果を表示したい

Question

ご覧いただきありがとうございます。
reactで割り勘アプリを作成しています。

画面から入力された合計金額と人数から
一人当たりの支払額を計算、表示したいです。

import { createRoot } from 'react-dom/client'
import CalcButton from '../components/CalcButton'
import {Box} from  '@material-ui/core';
import {TextField} from '@material-ui/core';
import { useForm } from "react-hook-form"
import React, { useState } from 'react';

const HookTop = () => {

type FormData = {
	totalAmount : number;
	partySize : number;
} 

let result = 0;
    
  const { register, handleSubmit } = useForm()

  const onSubmit = (data) => {
    console.log(data)
    result = data.totalAmount / data.partySize
    console.log(result)
  }

    return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      class="bg-gray-300 w-screen h-screen flex flex-col items-center justify-center space-y-4"
    >
      <input placeholder="合計金額" {...register("totalAmount")} />
      <input placeholder="人数" {...register("partySize")} />
      <input type="submit" />
      <p>一人当たりの支払額 {result}円 </p>

    </form>

    )
}

export default HookTop

onSubmit内のconsole.log(result)では
一人当たりの支払額を計算できていることは確認できましたが
画面上では0円と表示されたままになってしまっています。

値を保存する、または表示するために足りない処理は何になるでしょうか？