DatePicker Component with Multi-Calendar Support

Calender.tsx

import './App.css';
import {DatePicker} from "@react-spectrum/datepicker";
import {Provider}  from "@react-spectrum/provider";
import {theme} from "@react-spectrum/theme-default";
import {useState} from "react";

function App() {
  const [date, setDate] = useState(null);
  const [locale, setLocale] = useState("en-US");
  const [calendar, setCalendar] = useState("gregory");

  return (
    <div className="App">
      <div className="local-picker">
        Local:
        <select defaultValue="en-US" onChange={(event) => setLocale(event.target.value)}>
          <option value="en-US">English (United States)</option>
          <option value="en-GB">English (United Kingdom)</option>
          <option value="en-CA">English (Canada)</option>
          <option value="fr-FR">French (France)</option>
          <option value="fr-CA">French (Canada)</option>
          <option value="es-ES">Spanish (Spain)</option>
          <option value="es-MX">Spanish (Mexico)</option>
          <option value="de-DE">German (Germany)</option>
          <option value="pt-BR">Portuguese (Brazil)</option>
          <option value="it-IT">Italian (Italy)</option>
          <option value="ja-JP">Japanese (Japan)</option>
          <option value="ko-KR">Korean (South Korea)</option>
          <option value="am-ET">Amharic (Ethiopia)</option>
        </select>
      </div>
      <div className="calendar-picker">
        Calendar:
        <select defaultValue="gregory"
                onChange={(event) => setCalendar(event.target.value)}>
          <option value="buddhist">Buddhist Calendar</option>
          <option value="chinese">Chinese Calendar</option>
          <option value="coptic">Coptic Calendar</option>
          <option value="ethiopic">Ethiopic Calendar</option>
          <option value="gregory">Gregorian Calendar</option>
          <option value="hebrew">Hebrew Calendar</option>
          <option value="indian">Indian Calendar</option>
          <option value="islamic">Islamic Calendar</option>
          <option value="japanese">Japanese Calendar</option>
          <option value="persian">Persian Calendar</option>
          <option value="roc">Republic of China Calendar</option>
        </select>
      </div>
      <Provider theme={theme} locale={`${locale}-u-ca-${calendar}`}>
        <DatePicker label="Date" value={date} onChange={setDate}/>
        <p>Selected date: {date?.toString()}</p>
      </Provider>
    </div>
  );
}

export default App;