POST 403(forbidden) after dashboard has been embedded

import React, { Component } from 'react';
import Cookies from 'universal-cookie';
import { Redirect } from 'react-router-dom';

import { PowerBIEmbed } from 'powerbi-client-react';
import * as pbi from 'powerbi-client';

import { getAsyncPowerBi, getAsyncPowerBiToken } from '../Services/GetAPI';

import { PostPowerBI } from '../Services/PostAPI';
import { MsalProvider, MsalContext } from '@azure/msal-react';
import { loginRequest } from '../../authConfig';

import { getMenuData } from '../Services/MenuAccess';
const cookies = new Cookies();
const powerbi = new pbi.service.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
);

var models = pbi.models;
var tokenType = pbi.models.TokenType.Aad;

class Dashboards extends Component {
static contextType = MsalContext;

constructor(props) {
super(props);

this.state = {
embedUrl: '',
Data: [],
token: '',
reportToshow:false
};
}

getPoswerBI = async () => {
let res = await PostPowerBI(
'https://api.powerbi.com/v1.0/myorg/dashboards',
cookies.get('AccessToken')
);
console.log('Power', res);
if (res && res.value && res.value.length > 0) {
this.setState({
Data: res.value,
});
await this.handleChangeDashboard(res.value[6].id)

}

};
getDataMenu = async () => {
let res = await getMenuData();
if (res.USER_CLIENT) {
this.setState({
ClientData: res.USER_CLIENT,
});
}
};

hadleReport =() =>{
this.setState({
reportToshow:true
})
}

handleChangeDashboard = (embedDashboardId) =>{
var accessToken = cookies.get('AccessToken');
this.setState(prevState =>{
let {reportToshow} = prevState;
reportToshow = false;

return {reportToshow}
})

accessToken = accessToken.replace("Bearer ","")

// Read embed URL from Model
var embedUrl = `https://msit.powerbi.com/dashboardEmbed?dashboardId=${embedDashboardId}`;

// Read dashboard Id from Model
var embedDashboardId = embedDashboardId;

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models

console.log(models);

// Embed configuration used to describe the what and how to embed.
// This object is used when calling powerbi.embed.
// This also includes settings and options such as filters.
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
var config = {
type: 'dashboard',
tokenType: models.TokenType.Aad,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedDashboardId
};

// Get a reference to the embedded dashboard HTML element
var dashboardContainer = document.getElementById("dashboardContainer");
powerbi.reset(dashboardContainer);

//$('#dashboardContainer')[0] ;

// Embed the dashboard and display it within the div container.
var dashboard = powerbi.embed(dashboardContainer, config);
dashboard.on("tileClicked", function (event) {
this.hadleReport();
var objTileClick = JSON.parse(JSON.stringify(event.detail, null, " "));

var embedUrlReport = objTileClick.reportEmbedUrl;
var reportId = embedUrlReport.substring((embedUrlReport.indexOf("reportId=") + 9));
reportId = reportId.substring(0, reportId.indexOf("groupId")-1);
var tileIdSelected = objTileClick.tileId;
var pageNameSelected = objTileClick.pageName;

console.log("embedUrlReport: "+ embedUrlReport);
console.log("reportId: "+ reportId);
console.log("tileIdSelected: "+ tileIdSelected);
console.log("pageNameSelected: "+ pageNameSelected);

var configReport = {
type: 'report',
accessToken: accessToken,
embedUrl: embedUrlReport,
id: reportId,
tileId:tileIdSelected,
pageName:pageNameSelected,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};

var reportContainer = document.getElementById("dashboardContainer2");

powerbi.reset(reportContainer);
// Embed the report and display it within the div container.
var report = powerbi.embed(reportContainer, configReport);

}.bind(this))
}
async componentDidMount() {
await this.getPoswerBI();
await this.getDataMenu();


}

render() {
if (cookies.get('token') == null || cookies.get('token') === undefined) {
return <Redirect to="/" />;
}

const { Data, reportToshow } = this.state;
return (
<div>
<div className="pagetitle">Dashboard</div>
<div className="dbmenu">
<ul>
{Data &&
Data.map((item, i) => (
<li onClick={()=>this.handleChangeDashboard(item.id)} key={'inv' + i}>{item.displayName}</li>
))}
</ul>
<div className="clr"></div>
</div>

<div id="dashboardContainer" style={{display:reportToshow ===false ? 'block':'none'}}></div>

<div id="dashboardContainer2" style={{display:reportToshow ===true ? 'block':'none'}}></div>

</div>
);
}
}

export default Dashboards;