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

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.

Start with the Mentions component and its onSearch path, then reproduce the warning by pressing Enter or selecting an option. Inspect the Overflow and DropdownMenu stack shown in the report; the work is complete when those interactions no longer produce a state-update-on-unmounted-component warning.