Material UI V5 <ListItemButton> onClick not working

Question

I have created a list of search suggestions using Link API. but the onClick handler is not triggering as it's supposed to. How should I correct it ?

Here's my list code

<Paper
      elevation={5}
      sx={{ maxWidth: { xs: "100%", md: "45%" }, marginTop: "10px" }}
    >
      <List sx={{ paddingTop: "20px", paddingBottom: "30px" }}>
        {topResponses.map((response, index) => {
          return (
            <>
              <ListItemButton
                id={response}
                sx={{
                  paddingTop: "20px",
                  paddingBottom: "10px",
                  border: "2px solid red",
                }}
                onClick={(event) => {
                  console.log("clicked");
                  
                }}
              >
                <ListItemText
                  primary={response}
                  primaryTypographyProps={{
                    fontSize: "18px",
                    fontWeight: "bold",
                  }}
                />
                {/* <p>{response}</p> */}
              </ListItemButton>
              <Divider variant="middle" textAlign="center" />
            </>
          );
        })}
      </List>
    </Paper>

One thing could be that since it's a search suggestion, I have set a handler that triggers as soon as the focus is lost from the search bar. So as I click on the search suggestion, it should be triggered. Can that be the issue?