passing date value in navigation-compose

Question

I'm trying to create an application with 2 pages with jetpack compose On the first page users would enter their sign-in information such as first name, last name, id, and date of birth, and then on the second page users should be able to see their sign in information. I have been trying to pass the data from the first page to the second page with navigation-compose. I could successfully send first name , last name and id but my method for sending date of birth value seem to have a logical problem and the application stops working after I tap the button to go to the second page . this is my code :

# Main Activity :
 

 @Composable
fun NavGraph() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "firstPage") {
        composable("firstPage") { FirstPage(navController = navController) }
        composable("secondPage/{name}/{lastName}/{id}/{date}") { backStackEntry ->
            SecondPage(
                navController = navController,
                name = backStackEntry.arguments?.getString("name") ?: "",
                lastName = backStackEntry.arguments?.getString("lastName") ?: "",
                id= backStackEntry.arguments?.getString("id") ?: "",
                date= backStackEntry.arguments?.getString("date") ?: ""


            )
        }
    }
}



# first page : 


@Composable
fun datepicker(context: Context , date: MutableState<String>){
    val year : Int
    val month:Int
    val day: Int
    val calender = Calendar.getInstance()
    year=calender.get(Calendar.YEAR)
    month=calender.get(Calendar.MONTH)
    day=calender.get(Calendar.DAY_OF_MONTH)
    calender.time= Date()

    val datePickerDialog= DatePickerDialog(
        context,{ _: DatePicker, year:Int, month:Int, dayOfMonth:Int ->
            date.value="$dayOfMonth/$month/$year"
        },year,month,day
    )
    Row {
        Button(
            onClick = {
                datePickerDialog.show()
            }, ) {
            Text(text = "Select your birthday ") }
        Text(text = "${date.value}", fontSize = 15.sp, textAlign = TextAlign.End)

    }
}
@Composable
fun FirstPage(navController: NavController) {
    var nameR by rememberSaveable {
        mutableStateOf("")
    }
    var familyR by rememberSaveable {
        mutableStateOf("")
    }
    var idR by rememberSaveable {
        mutableStateOf("")
    }
    var date = rememberSaveable { mutableStateOf("") }




    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        datepicker(context = LocalContext.current, date = date)
        TextField(
            value = nameR,
            onValueChange = {
                // This block is executed whenever the value changes
                nameR = it
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp),
            label = { Text("Name : ") }, // Optional: You can add a label for the text field
        )

        TextField(
            value = familyR,
            onValueChange = {
                // This block is executed whenever the value changes
                familyR = it
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp),
            label = { Text("Family : ") }, // Optional: You can add a label for the text field
        )
        TextField(
            value = idR,
            onValueChange = {
                // This block is executed whenever the value changes
                idR = it
            },
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp),
            label = { Text("ID : ") }, // Optional: You can add a label for the text field
        )
        Text(text = date.value)


        Button(onClick = {
            navController.navigate("secondPage/$nameR/$familyR/$idR/$date")
        }) {
            Text(text = "first page btn")
            // Your button content
        }


    }
}


# Second page : 


@Composable
fun SecondPage(navController: NavController, name: String, lastName: String ,id:String , date:String ) {
    // Use the received data in your UI
    // ...
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "first name: "+name+" |Last name: "+lastName+" |id"+id+"|date:"+date)
// Navigate back to the first page if needed
        Button(onClick = { navController.popBackStack() }) {
            // Your button content
            Text(text = "second page btn")

        }
    }
}

how can i pass the date of birth value to second page ?