如何在react原生应用中创建和管理icalendar VEvent

import React, { useState } from 'react';
import ical from 'ical.js';

const VEvent = () => {
  const [title, setTitle] = useState('');
  const [startTime, setStartTime] = useState('');
  const [endTime, setEndTime] = useState('');
  const [location, setLocation] = useState('');

  const generateICalendar = () => {
    const jcalData = {
      method: 'PUBLISH',
      start: startTime,
      end: endTime,
      location: location,
      summary: title,
    };

    const jcal = new ical.Component(jcalData);
    const icsData = jcal.toString();

    // 下载或处理icsData
  };

  return (
    <div>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Event Title"
      />
      <input
        type="datetime-local"
        value={startTime}
        onChange={(e) => setStartTime(e.target.value)}
        placeholder="Start Time"
      />
      <input
        type="datetime-local"
        value={endTime}
        onChange={(e) => setEndTime(e.target.value)}
        placeholder="End Time"
      />
      <input
        type="text"
        value={location}
        onChange={(e) => setLocation(e.target.value)}
        placeholder="Location"
      />
      <button onClick={generateICalendar}>Add to Calendar</button>
    </div>
  );
};

export default VEvent;