How to use react autocomplete package to select users from input in React

i am using https://www.npmjs.com/package/react-search-autocomplete package to select users from input field but it is not displaying the results. can any one help what is wrong with my code ?

const Home = ({socket, username, onlineUsers}) => {
  const [message, setMessage] = useState("");
  const handleSubmitMessage =(e)=> {
    e.preventDefault();
    const newMessage = {
        text: message,
        sender: username,
        id: socket.id,
        timeStamp: Date.now()
    }
    socket.emit("sendmessage", newMessage)
  }

  const handleOnSearch = (string, results) => {
    // onSearch will have as the first callback parameter
    // the string searched and for the second the results.
    console.log(string, results)
  }

  const handleOnHover = (result) => {
    // the item hovered
    console.log(result)
  }

  const handleOnSelect = (item) => {
    // the item selected
    console.log("ITEM",item)
  }

  const handleOnFocus = () => {
    console.log('Focused')
  }

  const formatResult = (item) => {
    return (
      <>
        <span style={{ display: 'block', textAlign: 'left' }}>name: {item.name}</span>
      </>
    )
  }
return (
    <Container fluid className="px-4">
      <Row className="my-3 d-flex justify-content-center" style={{ height: "95vh" }}>
        <Col md={6} className="p-4 d-flex flex-column justify-content-between chat-container">
          {/* USERNAME INPUT */}
          <div style={{ width: 400 }}>
          <ReactSearchAutocomplete
            items={onlineUsers}
            onSearch={handleOnSearch}
            onHover={handleOnHover}
            onSelect={handleOnSelect}
            onFocus={handleOnFocus}
            autoFocus
            formatResult={formatResult}
          />
        </div>
          {/* MESSAGE BOX */}
          <ListGroup >
            <ListGroup.Item className="message-input">Cras justo odio</ListGroup.Item>
          </ListGroup>
          {/* NEW MESSAGE INPUT */}
          <Form className="d-flex" >
            <Form.Control
            className="inputs rounded-pill"
              type="text"
              placeholder="What is your message ?"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            />
            <BiSend className="text-info" style={{fontSize:"39px"}} onClick={handleSubmitMessage}/>
          </Form>
        </Col>
      </Row>
    </Container>
  );

Here is my onlineUsers object. When i use react-autocomplete package default data it is working but with this object did not work

[
    {
        "username": "Asd",
        "id": "BB-z5RFducnJ029xAAAX"
    }
]