using react-mentions with mongoDB

[mohqaz]

i installed react-mentions I did not discover how to use it, and all I found was an explanation of how to use it with data stored in the same project, (fake data)

And I want to know how to use it with real data that is fetched from a database from MongoDB

It is assumed that as soon as I type @, the system reviews username suggestions, or when I type a letter after it, it suggests usernames that starts with this letter.

but when i type @ nothing happened

Note: I am trying to call the data in Mentions component and then I try to call its input in another component and use it

and this is the code I tried:

Mentions.jsx

const Mentions = () => {
    const [value, setValue] = useState("");
    console.log("Value: ", value);

const fetchUsers = async (username, callback) => {
    if (!username) {
        return;
    }
    const users = await fetch(`http://localhost:5000/api/users/users`)
    const filteredUsers = users.filter((user) => 
    user.includes(username));
    callback(filteredUsers);
}
  return (
    <Box>
        <MentionsInput 
        style={defaultStyle}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={"Mention people using '@'"}
        allySuggestionsListLabel={"Suggested mentions"}
        >
            <Mention style={defaultMentionStyle} data={fetchUsers}/>
        </MentionsInput>
    </Box>
  )
}

This is the textarea that I'm trying to make it use the function I wrote in Mentions Component
The textarea exists in another component

CreatePost.jsx

               <Textarea
                placeholder= {`${user.username} say something...`}
                onChange={handleTextChange}
                value={postText}
                />

Observed behaviour:

Workaround: