Tengo un problema con ReactDOMServer y Material UI Theme Provider. Todo funciona bien , pero sigo recibiendo este molesto error en la consola:

 Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.

Todas las soluciones que he encontrado hasta ahora implican que tengo que eliminar ThemeProvider, pero me gustaría saber si no hay una mejor manera de resolver esto.

CÓDIGO:

 const mapIcon = useMemo(() => { let namePosition: MapPinProps['namePosition'] = 'bottom-start'; if (position.lng > 120) { namePosition = 'bottom-end'; } if (position.lng > 120 && position.lat < -80) { namePosition = 'top-end'; } if (position.lng <= 120 && position.lat < -80) { namePosition = 'top-start'; } const html = ReactDOMServer.renderToStaticMarkup( <ThemeProviders> <MapPin active={isMapBuilder ? active : !completed} highlight={highlightRequiredEvent} icon={completed && doneIcon ? doneIcon : icon} name={event?.type !== EVENTS_TYPE.ANIMATION || isMapBuilder ? name : ''} rarity={rarity} read={isMapBuilder || event?.type === EVENTS_TYPE.ANIMATION || read} interactive={isMapBuilder || event?.type !== EVENTS_TYPE.ANIMATION} selected={selected} shape={shape} size={iconSize} userSettings={user.settings} namePosition={namePosition} locked={locked && !isMapBuilder} isMapBuilder={isMapBuilder} /> </ThemeProviders> ); return new L.DivIcon({ className: '', // iconAnchor, // popupAnchor, iconSize: [iconSize, iconSize], html: html.toString(), }); }, [ position.lng, position.lat, event?.type, isMapBuilder, active, completed, highlightRequiredEvent, doneIcon, icon, name, rarity, read, selected, shape, iconSize, user.settings, locked, ]);