I am trying to build a date picker , when I click on the button the datepicker should appear but I dont know why it isnt working

        {/* Hidden Date Input */}
        <div>
          <input
            ref={dateInputRef}
            type="date"
            value={selectedDate}
            onChange={(e) => setSelectedDate(e.target.value)}
            className="hidden"
          />
          <button
            className="w-[250px] md:w-[300px] h-[50px] p-3 flex justify-between items-                        center text-[16px] lg:text-[20px] font-bold lg:font-normal text-white bg-                   cameo border border-solid border-cameo"
            onClick={() => {
              console.log('Button clicked');
              dateInputRef.current?.click();
            }}
          >
            <Image src={calendar} alt="" className='w-6 h-6' />
          </button>
        </div>