I have a page where I can add comment. Now, I need that comment to be displayed in header without refreshing when I click the checkbox

onChange={()=>{
                asksFor === "Beneficiary" ? (comment.beneficiaryId = selectedBeneficiaryDetail?.beneficiaryId)
                          : (comment.donorId = selectedDonorDetail?.donorId)

                          displayInHeader(comment);
                        }}

And:

toast.info("Comment is " + (comments.displayInHeader === true ? " enabled successfully for displaying in header.": "Disabled."));

What I've tried:

toast.info("Comment is " + (comments.displayInHeader === true ? " enabled successfully for displaying in header.": "Disabled."));
      if( comments.displayInHeader === true && this.selectedBeneficiaryDetail && commentDetail.beneficiaryId !== undefined )
      { this.selectedBeneficiaryDetail.displayCommentInHeader = commentDetail.comments;
        console.log(this.selectedBeneficiaryDetail.displayCommentInHeader);
      }
      else if( comments.displayInHeader === true && this.rootStore.donorStore.selectedDonorDetail && commentDetail.donorId !== undefined)
      {
         this.rootStore.donorStore.selectedDonorDetail.displayCommentInHeader = commentDetail.comments;
         console.log (this.rootStore.donorStore.selectedDonorDetail.displayCommentInHeader);

      }
    });