React Emoji Mart в чем проблема?

 import { useEffect, useState } from 'react'; 
import { Box, Typography } from '@mui/material'; 
import { Picker } from 'emoji-mart'; 
 
const EmojiPicker = props => { 
	const [selectedEmoji, setSelectedEmoji] = useState(); 
	const [isShowPicker, setIsShowPicker] = useState(false); 
 
	useEffect(() => { 
		setSelectedEmoji(props.icon); 
	}, [props.icon]); 
 
	const selectEmoji = e => {}; 
	const showPicker = () => setIsShowPicker(!isShowPicker); 
 
	return ( 
		<Box sx={{ position: 'relative', width: 'max-content' }}> 
			<Typography 
				variant='h3' 
				fontWeight='700' 
				sx={{ display: 'inline' }} 
				onClick={showPicker} 
			> 
				{selectedEmoji} 
			</Typography> 
			<Box 
				sx={{ 
					display: isShowPicker ? 'block' : 'none', 
					position: 'absolute', 
					top: '100%', 
					zIndex: '9999', 
				}} 
			> 
				<Picker 
					theme='dark' 
					onSelect={selectEmoji} 
					showPreview={false} 
				/> 
			</Box> 
		</Box> 
	); 
}; 
 
export default EmojiPicker;