How to create events on outlook using microsoft graph api after login with sso

I have a app that fetches the token after sso login with Microsoft. I want to create event for using that token. But it gives an error when I use that token to create an event. The token that is generate by the graph explorer works fine but the token generated from sso login doesn't work.

I am using angular. the package for sso is @azure/msal-angular

 this.authService.loginPopup({redirectUri: 'http://localhost:4200',scopes: [ 'openid' ,'profile' ,'email' ,'Calendars.ReadWrite', 'Calendars.Read' ,'User.Read']})
    .subscribe({
      next: (result) => {
        console.log(result.accessToken); // using this access token 
       }
}
)
        




 url - https://graph.microsoft.com/v1.0/me/calendar/events
 
 body- {
    "subject": "Let's go for lunch",
    "body": {
        "contentType": "HTML",
        "content": "Does noon work for you?"
    },
    "start": {
        "dateTime": "2022-01-15T12:00:00",
        "timeZone": "India Standard Time"
    },
    "end": {
        "dateTime": "202-01-15T14:00:00",
        "timeZone": "India Standard Time"
    },
    "location": {
        "displayName": "Harry's Bar"
    },
    "attendees": [
        {
            "emailAddress": {
                "address": "ankitgupyta8768@gmail.com",
                "name": "Ankit Gupta"
            },
            "type": "required"
        }
    ],
    "allowNewTimeProposals": true,
    "transactionId": "7E163156-7762-4BEB-A8C6-729EA81755A8"
}


response- 
{"error":{"code":"NoPermissionsInAccessToken","message":"The token contains no permissions, or permissions can not be
understood.","innerError":{"oAuthEventOperationId":"7e74af78-358d-4f90-9b8d-b2656365592b","oAuthEventcV":"FyQYtJaGIm6+7397Aa/oLw.1.1","errorUrl":"https://aka.ms/autherrors#error-InvalidGrant","requestId":"3fb81b0a-42a8-47a0-995b-06d1301a3e0a","date":"2022-01-21T08:02:04"}}}