[BUG] - Producing Each child in a list should have a unique “key” prop console warning

[jaieds]

1. Describe the bug

I am using AnimatePresence and motion.div to create a dialog component. But it's producing Each child in a list should have a unique “key” prop console warning after opening the drawer component. If I remove the AnimatePresence and motion.div, the error is no longer produced.

2. Sceenshot

3. Environment details

• React v18.3.1
• Framer-motion: v11.15.0
• Bundler: Webpack
• Browser: Chrome 131.0

FAQs

Part of code that producing the error:

const animationVariants = {
	left: {
		open: {
			x: 0,
		},
		exit: {
			x: '-100%',
		},
	},
	right: {
		open: {
			x: 0,
		},
		exit: {
			x: '100%',
		},
	},
};

export interface DrawerPanelProps {
	/** Drawer content. */
	children: ReactNode | ( ( props: { close: () => void } ) => ReactNode );
	/** Additional class names. */
	className?: string;
}

const DrawerPanel = ( { children, className }: DrawerPanelProps ) => {
	const { open, position, handleClose, drawerRef, transitionDuration } =
		useDrawerState();

	return (
		<AnimatePresence>
			{ open && (
				<div className="fixed inset-0">
					<div
						className={ cn(
							'flex items-center justify-center h-full',
							{
								'justify-start': position === 'left',
								'justify-end': position === 'right',
							}
						) }
					>
						<motion.div
							ref={ drawerRef }
							className={ cn(
								'flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
								className
							) }
							initial="exit"
							animate="open"
							exit="exit"
							variants={ animationVariants[ position! ] }
							transition={ transitionDuration }
						>
							{ typeof children === 'function'
								? children( { close: handleClose! } )
								: children }
						</motion.div>
					</div>
				</div>
			) }
		</AnimatePresence>
	);
};

DrawerPanel.displayName = 'Drawer.Panel';

export default DrawerPanel;

[mattgperry]

What happens if you remove just where children is rendered?

[jaiedsabid]

What happens if you remove just where children is rendered?

@mattgperry, When there are no children the warning produces that time also. I forgot to mention the warning produced for production build only.