Iam making a project in React using NextJS, am trying to implement a standalone search box inside Google Maps’ Standalone searchbox, the search box is giving me suggestions, but even though I try clicking on one of the suggestions in the dropdown, I am not able to select one

<div className="absolute left-1/2 transform -translate-x-1/2 flex space-x-4">
          <Dialog className="border-none">
            <DialogTrigger>
              <div>
                <Button asChild size="plantravel">
                  <div className="flex justify-end items-center">
                    <div className="mr-1">Charge Now</div>
                    <div>
                      <Image src={ChargeNow} alt="logo" className="h-6 w-6" />
                    </div>
                  </div>
                </Button>
              </div>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Charge Now</DialogTitle>
                <DialogDescription>
                  Charge your vehicle at the nearest charging station
                </DialogDescription>
              </DialogHeader>
              <div className="flex flex-col space-y-2 items-center">
                <div className="mb-8 z-1000">
                  <StandaloneSearchBox
                    ref={searchBoxRef}
                    onPlacesChanged={onPlacesChanged}
                    onLoad={onLoadsearch}
                    className="relative text-white fill-transparent "
                  >
                    <input
                      type="text"
                      id="search"
                      placeholder="Search"
                      className="text-white self-start"
                      style={{
                        boxSizing: `border-box`,
                        border: `1px solid green`,
                        width: `240px`,
                        height: `32px`,
                        padding: `0 12px`,
                        borderRadius: `3px`,
                        boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                        fontSize: `14px`,
                        outline: `green`,
                        textOverflow: `ellipses`,
                        position: "absolute",
                        left: "50%",
                        marginLeft: "-120px",
                        textcolor: "black",
                        backgroundColor: "primary",
                        colorScheme: "dark",
                      }}
                    />
                  </StandaloneSearchBox>
                </div>
                <p>or</p>
                <Button
                  className="bg-transparent  text- border-2 border-white hover:bg-white hover:text-black"
                  onClick={getCurrentLocation}
                >
                  Use Current Location
                </Button>
                <p>How close do you want your station to be</p>
                <div className="flex flex-row gap-2">
                  <p>1 km</p>
                  <Slider
                    className="w-48"
                    value={sliderValue}
                    step={10}
                    onValueChange={(value) => {
                      setSliderValue(value);
                    }}
                  />
                  <p>10 km</p>
                </div>
                <p>{sliderValue[0] / 10} km</p>

                <Button variant="plantravel" className="bg-transparent w-full">
                  Charge Now
                </Button>
              </div>
            </DialogContent>
          </Dialog>

Now I am trying to increase the Z index of the standalone searchbox, I am able to type in the search box and it is giving me suggestions in the drop box, but still, I am not able to click on the suggestions.