Select component changes value to "" when page is loaded

[alananisimov]

I have a code linked to atomWithStorage from jotai. Then page is loaded i see that value is changed to "" in console. But if i use default value from atom, which is "learning" all is normal.
const [selectedGoal, setSelectedGoal] = useAtom(selectedGoalAtom); const onChange = (v: string) => { console.log(v); setSelectedGoal(v); }; return ( <Select value={selectedGoal} onValueChange={onChange}> <SelectTrigger id="goal" className="items-start [&_[data-description]]:hidden" > <SelectValue placeholder="Select a goal" /> </SelectTrigger> <SelectContent className=" sm:max-w-full"> <SelectItem value="learning"> <div className="flex items-start gap-3 text-muted-foreground"> <GraduationCap className="size-5" /> <div className="grid gap-0.5"> <p> Learn{" "} <span className="font-medium text-foreground"> something new </span> </p> <p className="text-xs" data-description> It will generate new ideas for <br className="sm:hidden"></br>{" "} your language learning journey </p> </div> </div> </SelectItem> <SelectItem value="portfolio_building"> <div className="flex items-start gap-3 text-muted-foreground"> <BookOpen className="size-5" /> <div className="grid gap-0.5"> <p> Build{" "} <span className="font-medium text-foreground"> personal portfolio </span> </p> <p className="text-xs" data-description> Seeking more freelance clients <br className="sm:hidden"></br>{" "} but have limited work history? </p> </div> </div> </SelectItem> <SelectItem value="personal_startup"> <div className="flex items-start gap-3 text-muted-foreground"> <BriefcaseBusiness className="size-5" /> <div className="grid gap-0.5"> <p> Launch unique{" "} <span className="font-medium text-foreground">startup</span> </p> <p className="text-xs" data-description> Want to bring to life new unique ideas </p> </div> </div> </SelectItem> </SelectContent> </Select> );