Can't perform a React state update on an unmounted component.

[CalvinJamesHeath]

When I press enter or select an option i get the following error.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at Overflow (https://localhost:3000/static/js/bundle.js:192761:32) at InheritableContextProvider (https://localhost:3000/static/js/bundle.js:190509:23) at https://localhost:3000/static/js/bundle.js:189096:27 at DropdownMenu (https://localhost:3000/static/js/bundle.js:188162:62) at https://localhost:3000/static/js/bundle.js:157663:23 at div at DomWrapper (https://localhost:3000/static/js/bundle.js:191837:90) at https://localhost:3000/static/js/bundle.js:191540:32 at DomWrapper (https://localhost:3000/static/js/bundle.js:193295:90) at SingleObserver (https://localhost:3000/static/js/bundle.js:193338:24) at ResizeObserver (https://localhost:3000/static/js/bundle.js:193475:24) at https://localhost:3000/static/js/bundle.js:157242:20 at https://localhost:3000/static/js/bundle.js:157712:21 at https://localhost:3000/static/js/bundle.js:158742:34 at KeywordTrigger (https://localhost:3000/static/js/bundle.js:188261:25) at div

Code:

`<Mentions

				style={{ width: '100%' }}
				onSearch={onSearch}
			>
				{users.map((user, index) => (
					<Option value={user.handle} id={user.userId} key={index}>
						<div className='followList spaceBetween'>
							<div className='flex' style={{ width: '60%' }}>
								<ImgSrc
									userHandle={user.handle}
									userImage={user.imageUrl}
									userImageColor={user.imageColor}
									css='listImg'
									fontSize='23px'
									height='60px'
									width='53px'
								/>
								<div className='listItemText'>
									<span className='listItemSpan'>{user.handle}</span>
									{user.name && <p className='listItemP'>{user.name}</p>}
								</div>
							</div>
						</div>
					</Option>
				))}

				{users.length === 0 &&
					following.map((user, index) => (
						<Option
							value={user.followed}
							id={user.followedUserId}
							key={user.followedUserId}
						>
							<div className='followList spaceBetween'>
								<div className='flex' style={{ width: '60%' }}>
									<ImgSrc
										userHandle={user.followed}
										userImage={user.userImage}
										userImageColor={user.userImageColor}
										css='listImg'
										fontSize='23px'
										height='60px'
										width='53px'
									/>
									<div className='listItemText'>
										<span className='listItemSpan'>{user.followed}</span>
										{user.name && <p className='listItemP'>{user.name}</p>}
									</div>
								</div>
							</div>
						</Option>
					))}
			</Mentions>`

Error persists in both class and functional components.

[CalvinJamesHeath]

I also get the error if i use the prefix '@' to show the available options and then delete it to close the mentions.

[CalvinJamesHeath]

Also is there a way to highlight the mention?

[CalvinJamesHeath]

When you add a new mention in a new line it adds an initial space.