problem in navigate and messageService toastModule primeng angular

I have a problem that the primeng display service is not working properly
in such a way that an operation is executed

I will display the message first
Then I redirect to another page

Now it does not display the message
All message display rules are applied correctly
But because I redirect to another page, this message is not displayed

//Html

<p-toast></p-toast>


//TypeScript

@Component({
selector: 'app-task-flow',
standalone: true,
imports: [
ToastModule,
],
providers: [MessageService],
templateUrl: './task-flow.component.html',
styleUrl: './task-flow.component.scss',
})

export class TaskFlowComponent {

constructor(private router: Router, private messageService: MessageService) { }

clickBtn() {

this.messageService.add({
severity: 'success', summary: 'info',
detail: `Registration was successful.`
})

this.router.navigate(['/'], { state: {} });

}
}

Continue reading...