Datalist shows far from input

I am executing a simple auto-complete with datalist and input. The problem is that the datalist shows far from input area. I am using Tailwind with React for this project.

<div>
      <input
        type="text"
        name="search"
        placeholder="Search for products, brands"
        className="w-full p-4 text-sm rounded-lg bg-transparent border-solid border-2 border-black bg-white"
        onChange={(e) => setSearchTerm(e.target.value)}
        list="categories"
      />
      <datalist id="categories">
        {categories.map((category) => (
          <option value={category.name} />
        ))}
      </datalist>
    </div>