Webpack loader required for react component in node_module but not if it is local

Question

I am using NextJS and recently installed a package called react-pay-icons (library that exports a bunch of SVG's). When importing one of the components, I get a build error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Initially I couldn't work out why it was throwing as it was returning a react component that returns a SVG. I then replaced the code (in the node_modules directly without doing another install) with a component that I knew worked on my local which looks like:

const Icon = ({ height = 60, width = 200, viewBox = '0 8 110 75' }) => (
  <div style={{ height: '50px', width: '50px' }}>
    <svg xmlns='http://www.w3.org/2000/svg' version='1.1' id='Layer_1' viewBox='0 0 512 512'>
      <circle style={{ 'fill': '#FF1616' }} cx='256' cy='251.656' r='198.405' />
      <g>
        <path style={{ 'fill': '#FF1616' }} d='M364.44,36.458c31.423-31.423,82.37-31.423,113.794,0s31.423,82.37,0,113.794L364.44,36.458z' />
        <path style={{ 'fill': '#FF1616' }} d='M147.56,36.458c-31.423-31.423-82.37-31.423-113.794,0s-31.423,82.37,0,113.794L147.56,36.458z' />
        <circle style={{ 'fill': 'white' }} cx='256' cy='251.656' r='157.618' />
      </g>
      <path d='M485.445,29.246c-17.123-17.124-39.891-26.555-64.108-26.555s-46.984,9.43-64.108,26.555  c-3.983,3.983-3.983,10.441,0,14.424l48.924,48.924l-7.247,7.247C361.544,64.652,311.25,43.053,256,43.053  S150.456,64.652,113.096,99.84l-7.247-7.247l48.924-48.924c3.983-3.983,3.983-10.441,0-14.424  C137.648,12.121,114.882,2.691,90.665,2.691s-46.985,9.43-64.108,26.555C9.431,46.369,0,69.137,0,93.354s9.431,46.984,26.555,64.108  c1.913,1.912,4.507,2.987,7.212,2.987c2.705,0,5.298-1.075,7.212-2.987l50.445-50.446l7.513,7.513  c-32.076,36.693-51.541,84.678-51.541,137.127c0,77.541,42.531,145.33,105.486,181.282l-58.961,58.961  c-3.983,3.983-3.983,10.441,0,14.424c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.221-0.996,7.212-2.987l63.716-63.715  c25.698,11.339,54.091,17.653,83.937,17.653s58.239-6.313,83.937-17.653l63.716,63.715c1.992,1.992,4.602,2.987,7.212,2.987  c2.61,0,5.22-0.996,7.212-2.987c3.983-3.983,3.983-10.441,0-14.424l-58.961-58.961c62.956-35.951,105.486-103.74,105.486-181.282  c0-52.45-19.464-100.435-51.541-137.127l7.513-7.513l50.445,50.446c1.913,1.912,4.507,2.987,7.212,2.987s5.298-1.075,7.212-2.987  C502.569,140.339,512,117.571,512,93.354S502.569,46.369,485.445,29.246z M34.283,135.31c-9.011-12.056-13.884-26.632-13.884-41.956  c0-18.769,7.309-36.414,20.581-49.685c13.27-13.27,30.915-20.579,49.684-20.579c15.323,0,29.899,4.872,41.956,13.884L34.283,135.31z   M256,439.863c-103.777,0-188.205-84.428-188.205-188.205S152.223,63.453,256,63.453s188.205,84.428,188.205,188.205  C444.205,355.434,359.777,439.863,256,439.863z M477.717,135.31l-98.337-98.337c12.056-9.012,26.632-13.884,41.956-13.884  c18.769,0,36.413,7.309,49.684,20.58c13.271,13.271,20.58,30.916,20.58,49.684C491.602,108.678,486.728,123.254,477.717,135.31z' />
      <path d='M256,83.837c-92.536,0-167.821,75.283-167.821,167.82S163.464,419.477,256,419.477s167.821-75.283,167.821-167.82  S348.536,83.837,256,83.837z M256,399.079c-81.289,0-147.422-66.133-147.422-147.421S174.711,104.235,256,104.235  s147.422,66.133,147.422,147.421S337.289,399.079,256,399.079z' />
      <path d='M256,129.029c-5.632,0-10.199,4.566-10.199,10.199v108.203l-46.613,46.614c-3.983,3.983-3.983,10.441,0,14.424  c1.992,1.992,4.602,2.987,7.212,2.987c2.61,0,5.22-0.996,7.212-2.987l48.498-48.498c0.182-0.182,0.346-0.374,0.511-0.566  c2.188-1.871,3.579-4.645,3.579-7.749V139.228C266.199,133.595,261.632,129.029,256,129.029z' />
      <path d='M332.786,333.398c-4.104,3.857-4.305,10.312-0.447,14.417c2.007,2.136,4.717,3.215,7.434,3.215  c2.504,0,5.014-0.917,6.983-2.767c17.001-15.978,29.518-36.17,36.2-58.397c1.622-5.394-1.437-11.082-6.831-12.704  c-5.395-1.622-11.082,1.438-12.704,6.831C357.771,302.789,347.177,319.873,332.786,333.398z' />
      <path d='M306.512,351.818c-3.275,1.655-6.673,3.166-10.098,4.49c-5.254,2.031-7.868,7.936-5.838,13.191  c1.564,4.045,5.424,6.525,9.516,6.525c1.223,0,2.466-0.221,3.675-0.688c4.053-1.567,8.073-3.354,11.947-5.312  c5.027-2.541,7.043-8.676,4.502-13.704C317.674,351.292,311.54,349.276,306.512,351.818z' />
    </svg>
  </div>
);

export default Icon;

When importing the above component from the edited react-pay-icons node_modules I still got the same webpack error above. However, if I import this component from my local project, it renders just fine.

My initial thoughts were that maybe the webpack loaders are ignored for anything inside node_modules, but I am also using the Mui react component library which exports SVG icons just find which do not throw the webpack loaders error. Could somebody please explain why this would be the case?

Thankyou!