Setting a default value for the Accordion (SSR problem)

[helalsoft]

1742120935.webm

The Accordion component sets its default value on page load instead of loading the already set values in Next.js

I have copied the component from here: https://github.com/ekmas/neobrutalism-components/blob/v4-canary/apps/docs/src/components/css-vars/accordion.tsx

{
    "next": "15.2.2",
    "tailwindcss": "^4.0.0"
}

Here is the implementation:

// page.tsx
"use client";
import { useState } from "react";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "shared/components/ui/card";
import { Input } from "shared/components/ui/input";
import { Label } from "shared/components/ui/label";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "shared/components/ui/select";
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "shared/components/ui/alert-dialog";
import { Avatar, AvatarFallback } from "shared/components/ui/avatar";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "shared/components/ui/accordion";
import { Button } from "shared/components/ui/button";
import { ThemeToggle } from "shared/components/theme-toggle";

export default function Page() {
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const handleDeploy = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  };

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
    if (!open) {
      setIsLoading(false);
    }
  };

  return (
    <div className="h-screen flex items-center justify-center bg-bg">
      <div className="flex flex-col gap-4">
        <ThemeToggle className="fixed right-10 top-10" />
        <Card className="w-[350px]">
          <CardHeader className="flex gap-4">
            <Avatar className="mx-auto">
              <AvatarFallback>EP</AvatarFallback>
            </Avatar>
            <div>
              <CardTitle>Create project</CardTitle>
              <CardDescription>
                Deploy your new project in one-click.
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent>
            <form>
              <div className="grid w-full items-center gap-4">
                <div className="flex flex-col space-y-1.5">
                  <Label htmlFor="name">Name</Label>
                  <Input id="name" placeholder="Name of your project" />
                </div>
                <div className="flex flex-col space-y-1.5">
                  <Label htmlFor="framework">Framework</Label>
                  <Select>
                    <SelectTrigger className="bg-bw text-text" id="framework">
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent position="popper">
                      <SelectItem value="next">Next.js</SelectItem>
                      <SelectItem value="sveltekit">SvelteKit</SelectItem>
                      <SelectItem value="astro">Astro</SelectItem>
                      <SelectItem value="nuxt">Nuxt.js</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </form>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button>Cancel</Button>
            <AlertDialog open={isOpen} onOpenChange={handleOpenChange}>
              <AlertDialogTrigger asChild>
                <Button variant="neutral" disabled={isLoading || isOpen}>
                  {isLoading ? "Deploying..." : "Deploy"}
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This action cannot be undone. This will permanently deploy
                    your project.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction onClick={handleDeploy}>
                    Continue
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </CardFooter>
        </Card>

        <Accordion
          type="single"
          collapsible
          className="w-[350px] space-y-2"
          defaultValue="item-1"
        >
          <AccordionItem value="item-1">
            <AccordionTrigger>Environment Variables</AccordionTrigger>
            <AccordionContent>
              <p className="mb-2">API_KEY=your_api_key_here</p>
              <p className="mb-2">DATABASE_URL=mongodb://localhost:27017</p>
              <p>NODE_ENV=production</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-2">
            <AccordionTrigger>Build Settings</AccordionTrigger>
            <AccordionContent>
              <p className="mb-2">Build Command: npm run build</p>
              <p className="mb-2">Output Directory: ./dist</p>
              <p>Cache: Enabled</p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="item-3">
            <AccordionTrigger>Deployment Logs</AccordionTrigger>
            <AccordionContent>
              <p className="mb-2">[16:00] Build started</p>
              <p className="mb-2">[16:02] Dependencies installed</p>
              <p>[16:05] Build completed successfully</p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  );
}