如何在React.js中根据套餐选择(包月、包年)自动显示续费日期？

import React, { useState } from 'react';

const RenewalDateComponent = () => {
  const [packageType, setPackageType] = useState('monthly');
  const [renewalDate, setRenewalDate] = useState('');

  const handlePackageChange = (event) => {
    setPackageType(event.target.value);
    // 根据选择的套餐类型计算续费日期
    const currentDate = new Date();
    let newRenewalDate = '';
    if (event.target.value === 'monthly') {
      newRenewalDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
    } else if (event.target.value === 'yearly') {
      newRenewalDate = new Date(currentDate.getFullYear() + 1, currentDate.getMonth(), currentDate.getDate());
    }
    setRenewalDate(newRenewalDate.toDateString());
  };

  return (
    <div>
      <h2>套餐选择</h2>
      <label>
        <input
          type="radio"
          value="monthly"
          checked={packageType === 'monthly'}
          onChange={handlePackageChange}
        />
        包月
      </label>
      <label>
        <input
          type="radio"
          value="yearly"
          checked={packageType === 'yearly'}
          onChange={handlePackageChange}
        />
        包年
      </label>
      <h2>续费日期</h2>
      <p>{renewalDate}</p>
    </div>
  );
};

export default RenewalDateComponent;