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

Question

[dima89e]

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;

console.js:288 The above error occurred in the <$724e43cd4d4265a7$export$2e2bcd8739ae039> component:

    at $724e43cd4d4265a7$export$2e2bcd8739ae039
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at EmojiPicker (http://localhost:5173/src/components/common/EmojiPicker.jsx?t=1720183688065:23:45)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at Board (http://localhost:5173/src/pages/Board.jsx:35:23)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:3989:5)
    at Outlet (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:4359:26)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at div
    at http://localhost:5173/node_modules/.vite/deps/chunk-K6N6KNV3.js?v=ac870396:2987:50
    at Box3 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:632:19)
    at AppLayout (http://localhost:5173/src/components/layout/AppLayout.jsx:28:20)
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:3989:5)
    at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:4423:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:4366:15)
    at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=6f187045:5109:5)
    at RtlProvider (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:1009:5)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:958:5)
    at ThemeProvider2 (http://localhost:5173/node_modules/.vite/deps/chunk-WXKN7XVK.js?v=ac870396:1048:5)
    at ThemeProvider (http://localhost:5173/node_modules/.vite/deps/chunk-CYDYG6HB.js?v=ac870396:313:12)
    at App
    at Provider (http://localhost:5173/node_modules/.vite/deps/react-redux.js?v=7de33230:1097:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ console.js:288
logCapturedError @ chunk-3IHV7RO6.js?v=ac870396:14032
update.callback @ chunk-3IHV7RO6.js?v=ac870396:14052
callCallback @ chunk-3IHV7RO6.js?v=ac870396:11248
commitUpdateQueue @ chunk-3IHV7RO6.js?v=ac870396:11265
commitLayoutEffectOnFiber @ chunk-3IHV7RO6.js?v=ac870396:17093
commitLayoutMountEffects_complete @ chunk-3IHV7RO6.js?v=ac870396:17980
commitLayoutEffects_begin @ chunk-3IHV7RO6.js?v=ac870396:17969
commitLayoutEffects @ chunk-3IHV7RO6.js?v=ac870396:17920
commitRootImpl @ chunk-3IHV7RO6.js?v=ac870396:19353
commitRoot @ chunk-3IHV7RO6.js?v=ac870396:19277
finishConcurrentRender @ chunk-3IHV7RO6.js?v=ac870396:18760
performConcurrentWorkOnRoot @ chunk-3IHV7RO6.js?v=ac870396:18718
workLoop @ chunk-3IHV7RO6.js?v=ac870396:197
flushWork @ chunk-3IHV7RO6.js?v=ac870396:176
performWorkUntilDeadline @ chunk-3IHV7RO6.js?v=ac870396:384
Show 16 more frames
Show less
chunk-3IHV7RO6.js?v=ac870396:11548 Uncaught TypeError: Class constructor $724e43cd4d4265a7$export$2e2bcd8739ae039 cannot be invoked without 'new'
    at renderWithHooks (chunk-3IHV7RO6.js?v=ac870396:11548:26)
    at mountIndeterminateComponent (chunk-3IHV7RO6.js?v=ac870396:14926:21)
    at beginWork (chunk-3IHV7RO6.js?v=ac870396:15914:22)
    at beginWork$1 (chunk-3IHV7RO6.js?v=ac870396:19753:22)
    at performUnitOfWork (chunk-3IHV7RO6.js?v=ac870396:19198:20)
    at workLoopSync (chunk-3IHV7RO6.js?v=ac870396:19137:13)
    at renderRootSync (chunk-3IHV7RO6.js?v=ac870396:19116:15)
    at recoverFromConcurrentError (chunk-3IHV7RO6.js?v=ac870396:18736:28)
    at performConcurrentWorkOnRoot (chunk-3IHV7RO6.js?v=ac870396:18684:30)
    at workLoop (chunk-3IHV7RO6.js?v=ac870396:197:42)