i want to implement hotel-datepicker inside react function (nextJs),. Its fresh instalation of nextJs. It already show the input tag, but when i click the input tag, nothing show. Can someone help me. here is the screenshot of my code

 "use client";
import React, { useRef, useEffect } from "react";

import * as fecha from "fecha";
import HotelDatepicker from "hotel-datepicker";
import "hotel-datepicker/dist/css/hotel-datepicker.css";

function dateHotel() {
const inputRef = useRef(null);

const handleDatepickerInit = () => {
if (inputRef.current) {
var datepicker = new HotelDatepicker(inputRef.current);
}
};

useEffect(() => {
handleDatepickerInit();
console.log("here");
}, []); // Run only once on component mount

return (

  <section className="">
    <div>
      <input ref={inputRef} type="text" id="input-id" />
    </div>
  </section>
);
}

export default dateHotel;

this code only show the input tag and when I click it, nothing show

ps : I already install hotel-datepicker and fetca