Here is the code for this page, rendering the date picker widget:

// src/pages/day-picker.astro
---
import Calendar from '../components/Calendar.jsx';
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Day Picker">
<main>
<Calendar client:only="react"/>
</main>
</BaseLayout>

… and here is the React component, using React Day Picker:

// src/componentes/Calendar.jsx

import React, { useState } from "react";
import DayPicker from "react-day-picker";
// Note: importing the the styles is NOT working.
import "react-day-picker/lib/style.css";
// I am using the stylesheet link in my layout:
// <link rel="stylesheet" href="https://unpkg.com/react-day-picker/lib/style.css">

export default function Calendar() {
const [day, setDay] = useState(null);
const options = { 
weekday: 'long', 
year: 'numeric', 
month: 'long', 
day: 'numeric' };

const handleDayClick = (event) => {
setDay(event)
};

return (
<div>
<DayPicker selectedDays={day} onDayClick={handleDayClick} />
<p>{day ? day.toLocaleDateString('en-CA', options) : "Please select a day 👻"}</p>
</div>
)
};