I tried so many things on this weird problem but it didn't work. please help. I'm using the latest version of Next.js 16.2.4

here's the TL;DR. I tried manually typing "/login" on the address bar, then I used back button of the browser itself. after doing this, my date picker component doesn't open up when I click on it. there's something even more confusing.

there's a console log inside of the datepicker component (I pasted the code here), even the console log doesn't show up.

Does that mean, Caching in Next, just kept a ghost element that does nothing and it just shows up?

My index path, the main page.tsx path is a form that you can see here:

"use client";
import Image from "next/image";
import { Controller } from "react-hook-form";
import SubmitButton from "./SubmitButton";
import { useFormBl } from "../Bl/useFormBl";
import  DatePicker  from "@/components/DatePicker";

export default function Form() {
  const { register, handleSubmit, control, errors, isSubmitting, onSubmit } = useFormBl();

  return (
    

      

      {/* Date Field */}
      

         (
            
          )}
        />
      

      {/* Subject Field */}
      

        
      

      {/* Context Field */}
      

        
      
      
    
  );
}

Inside of this form, there's my custom date picker component:

"use client";
import { useState, useRef, useEffect } from "react";
import { DayPicker } from "react-day-picker/persian";
import { faIR } from "react-day-picker/persian";
import "react-day-picker/style.css";

interface DatePickerProps {
  value: string;
  onChange: (value: string) => void;
  error?: string; // Contains the RHF error message
}

export default function DatePicker({ value, onChange, error }: DatePickerProps) {
  console.log("DatePicker rendered with value:", value, "and error:", error);
  const [isOpen, setIsOpen] = useState(false);
  const wrapperRef = useRef(null);

  const selectedDate = value ? new Date(value) : undefined;

  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const displayValue = selectedDate
    ? new Intl.DateTimeFormat("fa-IR").format(selectedDate)
    : "";

  return (
    

      

         setIsOpen(!isOpen)}
          name={"date"} // Ensure this matches the RHF field name
        />
         setIsOpen(!isOpen)}
          className={`absolute right-3 top-1/2 -translate-y-1/2 ${error ? "text-red-500" : "text-gray-500"}`}
        >
          
        
      

      {isOpen && (
        

           {
              onChange(date ? date.toISOString() : "");
              setIsOpen(false);
            }}
          />
        
      )}
    
  );
}

It will not work if I go to the /login and comeback to the index route.