我正在处理一个项目，我正在更改日期值的状态，并希望在视图层渲染中使用它。然而，当我试图在那里使用它作为<h2>{appointmentDate.toLocaleDateString()}</h2>时，它会抛出错误***“Cannot read properties of undefined（阅读'toLocaleDateString'）".**
另外，如果我只是使用“appointmentDate”<h2>{appointmentDate}</h2>，它会抛出错误**“Objects are not valid as a React child（found：[object Date]）。如果你想呈现一个子元素的集合，请使用数组。
我想在h2标签中使用“appointmentDate”的值（在useState中定义，由“handleDate”函数更改）。请提供在函数外使用更新值的解决方案。
代码如下：

import { useRef, useState } from "react";
import { Calendar } from "react-date-range";
import { addDays } from "date-fns";
import { format } from "date-fns";
import "react-date-range/dist/styles.css"; // main css file
import "react-date-range/dist/theme/default.css"; // theme css file

export default function App() {
  const [appointmentDate, setAppointmentDate] = useState(new Date());

  const handleDate = (e) => {
    const clickedDate = e.target.value;
    setAppointmentDate(clickedDate);
    document.getElementById("select-calendar").innerHTML =
      appointmentDate.toLocaleDateString();
    console.log(appointmentDate);
  };
  return (
    <div className="App">
      <span id="select-calendar">Select calendar</span>
      <div onClick={handleDate}>
        <Calendar
          onChange={(item) => setAppointmentDate(item)}
          date={appointmentDate}
          className="stay-date"
          name="appointmentDate"
        />
      </div>
      <h2>{appointmentDate.toLocaleDateString()}</h2>
    </div>
  );
}

下面是codepen链接：https://codesandbox.io/s/happy-maxwell-6x28nx?file=/src/App.js:23-1034
我尝试使用useRef，但仍然抛出相同的错误。
PS：这是我在StackOverflow上的第一个问题。如果我不能正确地解释这个问题，请原谅我。