how send this FromDate Value to server
'use client'
import { Label } from "@/components/ui/label"
import { FromDate } from "./booking-fromdate"
import { useActionState } from "react"
import { sendBookingEmail } from "../actions/bookingForm"
import { Button } from "@/components/ui/button"

export default function BookingForm() {
const [state, action, pending] = useActionState(sendBookingEmail, null)
return (
<form action={action}>
<Label htmlFor="start-date">Start Date</Label>
<FromDate />
<Button type="submit" disabled={pending}>
Submit
</Button>
</form>
)
}


"use client"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Calendar } from "@/components/ui/calendar"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"

export function FromDate() {
const [date, setDate] = React.useState<Date>()
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal", // Responsive width
!date && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
initialFocus
/>
</PopoverContent>
</Popover>
)
}