Angular-GettingStarted Unable to resolve "Conflicting peer dependencies"

Hello, I am facing peer dependencies issue while deployIng the code directly from VSCode (internally it calls TeamsFx.Deploy==>running the npm install to install dependencies on azure).

Though I had manually adding in package.json for peerDependencies, but didn't got any clue for the correct fix...on local I ma able to run it by execute command.

1-Delete node_module folder and the package-lock.json file. 2-Run npm cache verify to verify and clean up your npm. 3-npm install --legacy-peer-deps

Throwing below error if trying deploy on azure from VS Code.

stack: Error: Command failed: npm install npm WARN config global --global, --local are deprecated. Use --location=global instead. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: @microsoft/[email protected] npm ERR! node_modules/@microsoft/teams-js npm ERR! @microsoft/teams-js@"^2.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @microsoft/teams-js@"^1.8.0" from [email protected] npm ERR! node_modules/msteams-react-base-component npm ERR! msteams-react-base-component@"^3.1.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: @microsoft/[email protected] npm ERR! node_modules/@microsoft/teams-js npm ERR! peer @microsoft/teams-js@"^1.8.0" from [email protected] npm ERR! node_modules/msteams-react-base-component npm ERR! msteams-react-base-component@"^3.1.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

image

My package json is: image