I’ve added

z-index: 500;
position: fixed;

to the wrapper style .autocomplete-wrapper .dropdown {.... It now looks like this

.autocomplete-wrapper .dropdown {
  width: 100%;
  padding: 0;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #0F67FF;
  border-top: none;
  z-index: 500;
  position: fixed;
}

Both z-index: 500; and position: fixed; are essential to make it work.

I have autocomplete dropdown , i have followed this link. I am facing issue in terms of displaying drop down items.

as i shown in the link, the drop down items are displayed in div tag with poistion as relative

css

.autocomplete-wrapper {
  width: 300px;
  position: absolute;
  display:  inline-block;
}

.autocomplete-wrapper > div {
  width: 100%;
  z-index: 1;
}

.autocomplete-wrapper input {
  border: 1px solid #cecece;
  padding: 5px 5px;
  border-radius: 3px;
  font-size: 12px;
  width: 100%;
}

.autocomplete-wrapper input:focus {
  border-color: #0F67FF;
  box-shadow: none;
  outline: none;
}

.autocomplete-wrapper Autocomplete{
  position: absolute;
  z-index: -1;
}

.autocomplete-wrapper .dropdown {
  width: 100%;
  padding: 0;
  text-align: left;
  max-height: 280px;
  overflow: hidden;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #0F67FF;
  border-top: none;
  z-index: 2;
}

.autocomplete-wrapper .item  {
  display: block;
  cursor: pointer;
  font-size: 10px;
  padding: 10px;
}

.autocomplete-wrapper .item.selected-item {
  background-color: #0069ff;
  color: #FAFBFC;
}

.autocomplete-wrapper .item:hover {
  background-color: #0069ff;
  color: #FAFBFC;
}

i tried giving position as absolute but it is overlapping with other input elements. i want the poistion of drop down should not disturb other input elements, like traditional react select dropdown.

code

       <div className="autocomplete-wrapper">
        <label htmlFor="title">Vehilce No</label>
        <Autocomplete 
          value={state.val}
          items={vehicles}
          getItemValue={item => item.numberPlate}
          shouldItemRender={renderVehicleNumber}
          renderMenu={item => (
            <div className="dropdown">
              {item}
            </div>
          )}
          renderItem={(item, isHighlighted) =>
            <div className={`item ${isHighlighted ? 'selected-item' : ''}`}>
              {item.numberPlate}
            </div>
          }
          onChange={(event, val) => setState({ val })}
          onSelect={val => setState({ val })}
        />
      </div>
    </div>
    <div className="form-group">
    <label htmlFor="price"> </label>
    <span>   </span>

    </div>
    <div className="form-group" style={{position: "static"}}> 
      <label htmlFor="price">Price</label>
      <input
        type="number"
        className="form-control"
        id="price"
        required
        value={creditEntry.price}
        onChange={handleInputChange}
        name="price"
      />
    </div>
    <div className="form-group">
      <label htmlFor="price">Litre</label>
      <input
        type="number"
        className="form-control"
        id="price"
        required
        value={creditEntry.litre}
        onChange={handleInputChange}
        name="price"
      />
    </div>