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.