Description
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.