heroku build failed on deployment

I am trying to host my React application on heroku but I keep getting the following errors:

-----> Installing dependencies
       Installing node modules
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE could not resolve
       npm ERR! 
       npm ERR! While resolving: react-credit-card-input@1.1.5
       npm ERR! Found: react@17.0.2
       npm ERR! node_modules/react
       npm ERR!   react@"^17.0.2" from the root project
       npm ERR!   peer react@">=16.8.0" from @emotion/react@11.7.1
       npm ERR!   node_modules/@emotion/react
       npm ERR!     @emotion/react@"^11.7.1" from the root project
       npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.6.0
       npm ERR!     node_modules/@emotion/styled
       npm ERR!       @emotion/styled@"^11.6.0" from the root project
       npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
       npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
       npm ERR!   31 more (@emotion/styled, @mui/base, @mui/icons-material, ...)
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-credit-card-input@1.1.5
       npm ERR! node_modules/react-credit-card-input
       npm ERR!   react-credit-card-input@"^1.1.5" from the root project
       npm ERR! 
       npm ERR! Conflicting peer dependency: react@16.14.0
       npm ERR! node_modules/react
       npm ERR!   peer react@"^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" from react-credit-card-input@1.1.5
       npm ERR!   node_modules/react-credit-card-input
       npm ERR!     react-credit-card-input@"^1.1.5" 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.
       npm ERR! 
       npm ERR! See /tmp/npmcache.GoZcZ/eresolve-report.txt for a full report.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.GoZcZ/_logs/2022-06-27T11_25_24_489Z-debug-0.log

I have tried to do both --legacy-peer-deps and npm install --force but my build keeps getting failed. Is there a way to fix this recurrent problem.

Answer

I had to update the peer dependency for credit-card-input library in the package-lock.json file to be compatible with my version of react and this solves my problem. I’m not sure if this is the best way but it solves the issue for me.