Errors deploying to heroku after integrating sendgrid email plugin

git repo: GitHub - JellieBeanz/Strapi-Backend: strapi backend for MVP
I am getting errors on my deployment to Heroku after I added a config/plugins.js file to my project.
I had been having issues with node/yarn before but that was resolved.
After I added the sendgrid email plugin below I started to get deploy errors in heroku (which I can confirm is working on Local Host(current versions: { node: ‘v17.3.1’, npm: ‘8.3.0’ }))

config/plugins.js:

module.exports = ({ env }) => ({
// …
email: {
config: {
provider: ‘sendgrid’,
providerOptions: {
apiKey: env(‘SENDGRID_API’),
},
settings: {
defaultFrom: ‘shaneoneill1995@gmail.com’,
defaultReplyTo: ‘shaneoneill1995@gmail.com’,
},
},
},
// …
});

Heroku errors:

-----> Installing dependencies
Installing node modules
npm ERR! code EUSAGE
npm ERR!
npm ERR! npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.
npm ERR!
npm ERR! Invalid: lock file’s qs@6.10.3 does not satisfy qs@6.10.1
npm ERR! Missing: qs@6.10.3 from lock file
npm ERR! Missing: qs@6.10.3 from lock file
npm ERR! Missing: qs@6.11.0 from lock file
npm ERR! Missing: qs@6.11.0 from lock file
npm ERR! Invalid: lock file’s react@17.0.2 does not satisfy react@16.14.0
npm ERR! Invalid: lock file’s react-dom@17.0.2 does not satisfy react-dom@16.14.0
npm ERR! Missing: @strapi/design-system@1.1.1 from lock file
npm ERR! Missing: react@17.0.2 from lock file
npm ERR! Missing: react-dom@17.0.2 from lock file
npm ERR! Missing: @strapi/icons@1.1.1 from lock file
npm ERR! Missing: react@17.0.2 from lock file
npm ERR! Missing: react-dom@17.0.2 from lock file
npm ERR! Missing: react@17.0.2 from lock file
npm ERR! Missing: react-dom@17.0.2 from lock file
npm ERR! Missing: react@17.0.2 from lock file
npm ERR! Missing: react-dom@17.0.2 from lock file
npm ERR! Missing: react@17.0.2 from lock file
npm ERR! Missing: react-dom@17.0.2 from lock file
npm ERR! Invalid: lock file’s scheduler@0.20.2 does not satisfy scheduler@0.19.1
npm ERR! Invalid: lock file’s @emotion/cache@11.7.1 does not satisfy @emotion/cache@11.9.3
npm ERR! Invalid: lock file’s @emotion/react@11.9.0 does not satisfy @emotion/react@11.9.3
npm ERR! Invalid: lock file’s @emotion/sheet@1.1.0 does not satisfy @emotion/sheet@1.1.1
npm ERR! Invalid: lock file’s @emotion/serialize@1.0.3 does not satisfy @emotion/serialize@1.0.4
npm ERR! Missing: scheduler@0.20.2 from lock file
npm ERR! Missing: scheduler@0.20.2 from lock file
npm ERR! Missing: scheduler@0.20.2 from lock file
npm ERR! Missing: scheduler@0.20.2 from lock file
npm ERR! Missing: scheduler@0.20.2 from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [–no-audit] [–foreground-scripts] [–ignore-scripts]
npm ERR! [–script-shell ]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run “npm help ci” for more info
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.AB1Kc/_logs/2022-07-01T18_36_05_201Z-debug-0.log
-----> Build failed

I have tried to take those missing dependencies and install them both the ones that say “Missing: scheduler@0.20.2 from lock file” and “Invalid: lock file’s qs@6.10.3 does not satisfy qs@6.10.1”
When I do that the deployment works but then I cannot access the content-type-builder or media Library - it just shows blank screen with the following errors in the browser

failed to load resource: net::ERR_BLOCKED_BY_CLIENT
6933.fdb5401e.chunk.js:15 Uncaught (in promise) TypeError: Failed to fetch
at 6933.fdb5401e.chunk.js:15:3790
at Generator.next ()
at y (6933.fdb5401e.chunk.js:15:2863)
analytics.strapi.io/track:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
main.be46e8cd.js:7997 Uncaught (in promise) Error: Network Error
at R.exports (main.be46e8cd.js:7997:28014)
at h.onerror (main.be46e8cd.js:7997:22911)
main.be46e8cd.js:8011 TypeError: Cannot destructure property ‘startSection’ of ‘(0 , t.useGuidedTour)(…)’ as it is undefined.
at jl (content-type-builder.5b69867a.chunk.js:294:57478)
at Xu (main.be46e8cd.js:8009:54806)
at _c (main.be46e8cd.js:8013:9231)
at Ac (main.be46e8cd.js:8013:992)
at Jc (main.be46e8cd.js:8013:920)
at fs (main.be46e8cd.js:8013:771)
at $s (main.be46e8cd.js:8011:11153)
at main.be46e8cd.js:8009:39603
at p.unstable_runWithPriority (main.be46e8cd.js:8578:3936)
at Hi (main.be46e8cd.js:8009:39381)
As @ main.be46e8cd.js:8011
6933.fdb5401e.chunk.js:85 TypeError: Cannot destructure property ‘startSection’ of ‘(0 , t.useGuidedTour)(…)’ as it is undefined.
at jl (content-type-builder.5b69867a.chunk.js:294:57478)
at Xu (main.be46e8cd.js:8009:54806)
at _c (main.be46e8cd.js:8013:9231)
at Ac (main.be46e8cd.js:8013:992)
at Jc (main.be46e8cd.js:8013:920)
at fs (main.be46e8cd.js:8013:771)
at $s (main.be46e8cd.js:8011:11153)
at main.be46e8cd.js:8009:39603
at p.unstable_runWithPriority (main.be46e8cd.js:8578:3936)
at Hi (main.be46e8cd.js:8009:39381)

I followed a tutorial on strapi website to deploy to heroku that recommended to use npm to install postgres but also used yarn in the local env.
Can any help?

https://github.com/JellieBeanz/Strapi-Backend this is the git repo