The first transition doesn't work when using dynamic import in NextJS

[hc0503]

I am using NextJS and this is my code, I need to use dynamic import for the popup optimization, but this package doesn't work in dynamic import for the first loading. If user clicks the openChapter button again, the transition works well from the second clicking.

import { useState } from "react";
import dynamic from "next/dynamic";
import OutsideClickHandler from "react-outside-click-handler";
import {CSSTransition} from "react-transition-group";
import ToolBar from "./toolbar";

const ChapterModal = dynamic(() => import("./chapter-modal"));

const SidebarWrapper = () => {
	const [showChapterModal, setShowChapterModal] = useState(false);

	return (
		<>
			<ToolBar
				onClickChapters={() => setShowChapterModal(!showChapterModal)}
			/>
			<OutsideClickHandler
				onOutsideClick={() => setShowChapterModal(false)}
			>
				<CSSTransition
					in={showChapterModal}
					timeout={300}
					classNames="chapter-modal"
					unmountOnExit
				>
					<ChapterModal
						onCloseClick={() => setShowChapterModal(false)}
					/>
				</CSSTransition>
			</OutsideClickHandler>
		</>
	);
};

export default SidebarWrapper;

This is the module style.

.chapterModal {
	background-color: var(--theme-chapter-toolbar-bg-color);
	position: fixed;
	width: 400px;
	top: 62px;
	right: 5px;
	bottom: 5px;
	box-shadow: -2px 1px 9px 0px rgb(85 85 85 / 13%);
	padding: 30px;
	border: 1px solid var(--theme-chapter-toolbar-border-color);
	border-radius: 5px;
	z-index: 2;
	transition: all 0.3s ease-in-out;

	&:global(.chapter-modal-enter) {
		transform:translateX(100%);
	}

	&:global(.chapter-modal-enter-active) {
		transform:translateX(0);
	}

	&:global(.chapter-modal-exit) {
		transform:translateX(0);
	}

	&:global(.chapter-modal-exit-active) {
		transform:translateX(100%);
	}

	.header {
		margin-bottom: 30px;
    	font-size: 24px;
	}
}

[nastakhov]

Same problem here