[Kotlin]ModalNavigationDrawer内のアイテムがTopAppBarに被る

実現したいこと

Kotlin(jetpack compose)で，TopAppBarのボタンを押してModalNavigationDrawerを表示させたい

発生している問題・分からないこと

上記の実現したいことは出来ましたが，Drawer内のアイテム（今回はただのテキスト）がTopAppBarに被った状態で表示されてしまいます

該当のソースコード

Kotlin
1class MainActivity : ComponentActivity() {
2    override fun onCreate(savedInstanceState: Bundle?) {
3        super.onCreate(savedInstanceState)
4        //enableEdgeToEdge()
5        setContent {
6            TestApp{
7                MainFun()
8            }
9        }
10    }
11}
12
13@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
14@Composable
15fun MainFun(){
16    // ModalNavigationDrawer
17    val drawerState = rememberDrawerState(DrawerValue.Closed)
18    val scope = rememberCoroutineScope()
19    ModalNavigationDrawer(
20        drawerContent = { DrawerContent()}, drawerState = drawerState
21    ){
22        Scaffold(
23            topBar = {
24                TopBar{
25                    scope.launch{
26                        drawerState.open()
27                    }
28                }
29            },
30            content = {
31                paddingValues -> Box(modifier = Modifier.fillMaxSize().padding(paddingValues)){
32                    MainContent()
33                }
34            }
35        )
36    }
37}
38
39@OptIn(ExperimentalMaterial3Api::class)
40@Composable
41fun TopBar(onNavigationIconClick:() -> Unit){
42    TopAppBar(
43        title = {
44            Text(
45                text = "TestApp",
46                maxLines = 1,
47                overflow = TextOverflow.Ellipsis
48            )
49        },
50        navigationIcon = {
51            IconButton(onClick = onNavigationIconClick){
52                Icon(
53                    Icons.Default.Menu,
54                    contentDescription = "Menu"
55                )
56            }
57        }
58    )
59}
60
61@Composable
62fun DrawerContent(){
63    Column{
64        //Text("", modifier = Modifier.padding(16.dp), color = Color.White)
65        Text("Txt1", modifier = Modifier.padding(16.dp), color = Color.White)
66        Text("Txt2", modifier = Modifier.padding(16.dp), color = Color.White)
67    }
68}
69
70@Composable
71fun MainContent(){
72    Box(modifier = Modifier.fillMaxSize().padding(16.dp), contentAlignment = Alignment.Center){
73        Text("Main Content")
74    }
75}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

chatgptの言うことを聞いてみて，MainFun()内でcontentを下記のように追加しましたが変わりませんでした

Kotlin
1            content = {
2                paddingValues -> Box(modifier = Modifier.fillMaxSize().padding(paddingValues)){
3                    MainContent()
4                }
5            }