Next.js Hydration failed, button inside a button using Shadcn

Question

I am trying to put Popover with Calendar inside Tabs, but I cant get it working and I get hydration error.

'use client'
import {cn} from "@/lib/utils";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
import {Button} from "@/components/ui/button";
import {CalendarIcon} from "lucide-react";
import {addDays, format} from "date-fns";
import {Calendar} from "@/components/ui/calendar";
import {useState} from "react";
import {Tabs} from "@/components/ui/tabs";
import {DateRange} from "react-day-picker";
import {TabsList, TabsTrigger} from "@/components/ui/tabs";

export default function DateTab() {
    const [date, setDate] = useState<DateRange | undefined>({
        from: new Date(2022, 0, 20),
        to: addDays(new Date(2022, 0, 20), 20),
    })
    return (
        <Tabs defaultValue="date-picker">
            <TabsList>
                <TabsTrigger value="date-picker">
                    <Popover>
                        <PopoverTrigger asChild>
                            <Button
                                id="date"
                                variant={"outline"}
                                className={cn(
                                    "w-[300px] justify-start text-left font-normal",
                                    !date && "text-muted-foreground"
                                )}
                            >
                            <CalendarIcon className="mr-2 h-4 w-4"/>
                            {date?.from ? (
                                date.to ? (
                                    <>
                                        {format(date.from, "LLL dd, y")} -{" "}
                                        {format(date.to, "LLL dd, y")}
                                    </>
                                ) : (
                                    format(date.from, "LLL dd, y")
                                )
                            ) : (
                                <span>Pick a date</span>
                            )}
                       </Button>
                    </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                                initialFocus
                                mode="range"
                                defaultMonth={date?.from}
                                selected={date}
                                onSelect={setDate}
                                numberOfMonths={2}
                            />
                        </PopoverContent>
                    </Popover>
                </TabsTrigger>
                <TabsTrigger value="28-days">
                    28 days
                </TabsTrigger>
                <TabsTrigger value="14-days">
                    14 days
                </TabsTrigger>
                <TabsTrigger value="7-days">
                    7 days
                </TabsTrigger>
            </TabsList>
        </Tabs>
    )
}

I have already tried adding asChild to but then it seems like data props aren't passed by along buttons and selected tab is not working properly.

I don't know if there is any other way to do this without getting hydration error?