search-inside-dropdown is not available in Next.js

[sho-tanaka0210]

I would like to use this in my Next.js Component, but when I try to output the state value it is not available.
https://preline.co/docs/advanced-select.html#search-inside-dropdown

The option in the select element is a state that uses useState.
I have it rendered whenever the value is updated as appropriate by useEffect, but I don't know if this is the cause.

The code I am implementing is as follows.

import { useEffect, useState } from "react";

type BaseInfo = {
  elemId: string
  className: string
  baseInfo: string;
  title: string;
  onChange?: (value: number) => void;
};

function BaseInfoSelect({ elemId, className, baseInfo, title, onChange = ((e) => { }) }: BaseInfo) {

  const [jsonData, setJsonData] = useState<any>(null);

  useEffect(() => {
    const selectElementById: HTMLElement | null = document.querySelector(`#${elemId}`);
    if (selectElementById) {
      const originalDataHsSelect = selectElementById.getAttribute('data-hs-select');
      if (originalDataHsSelect) {
        const updatedDataHsSelect = JSON.parse(originalDataHsSelect);
        updatedDataHsSelect.placeholder = title;

        if (className !== "") {
          updatedDataHsSelect.wrapperClasses = `${className}`;
        }

        selectElementById.setAttribute('data-hs-select', JSON.stringify(updatedDataHsSelect));
      }
    }

    if (selectElementById) {
      const loadPreline = async () => {
        const { HSSelect } = (await import("preline/preline"))
        const el = HSSelect.getInstance(`#${elemId}`) as InstanceType<typeof HSSelect>;
        if (el) {
          el.on("change", (value: string) => {
            onChange(Number(value));
          })
        }
      }
      loadPreline()
    }

  }, [elemId, onChange]);

  useEffect(() => {
    if (baseInfo) {
      setJsonData(JSON.parse(baseInfo));
    }
  }, [baseInfo]);

  if (!jsonData) {
    return <> NOTHING </>;
  }

  return (
    <>
      <select
        id={elemId}
        data-hs-select={JSON.stringify({
          hasSearch: true,
          searchPlaceholder: "Search...",
          searchClasses: "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 py-2 px-3",
          searchWrapperClasses: "bg-white p-2 -mx-1 sticky top-0",
          placeholder: title,
          searchNoData: "存在しません。",
          toggleTag: "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800\" data-title></span></button>",
          toggleClasses: "relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500",
          dropdownClasses: "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto",
          optionClasses: "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100",
          optionTemplate: "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800\" data-title></div></div></div>",
          extraMarkup: "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"flex-shrink-0 size-3.5 text-gray-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
        })}
        className="hidden"
      >
        <option value="">
          {title}
        </option>
        {
          (jsonData).map((e: any) => {
            return (
              <option key={e.id} value={e.id}>
                {e.name}
              </option>
            );
          })
        }
      </select>
    </>
  );

};

export default BaseInfoSelect;

I am not good with Next.js yet and it is possible I am doing it wrong.

Do you have any advice?
Thanks.