Error: Unable to resolve module missing-asset-registry-path with React Native app

I am trying to build a react native project and it is giving me an asset path error. I checked and double checked everything and I can not figure out why I am getting this issue.

here is the error:

info Dev server ready

i - run on iOS
a - run on Android
d - open Dev Menu
r - reload app

info Opening app on iOS...
info A dev server is already running for this project on port 8081.
info Found Xcode workspace "Grubber.xcworkspace"
info Found booted iPhone 15 Pro Max
info Building (using "xcodebuild -workspace Grubber.xcworkspace -configuration Debug -scheme Grubber -destination id=0C686315-2040-48D2-8D24-97C5F4422F75")
success Successfully built the app
info Installing "/Users/omarjandali/Library/Developer/Xcode/DerivedData/Grubber-fmzgeggnhellaudxvdkwklgxliav/Build/Products/Debug-iphonesimulator/Grubber.app on iPhone 15 Pro Max"
info Launching "app.grubber.grubber"
success Successfully launched the app on the simulator
 BUNDLE  ./index.js 

error: Error: Unable to resolve module missing-asset-registry-path from /Users/omarjandali/GrubberLLC/Grubber/src/Assets/Verified-icon.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
> 1 | �PNG
  2 | 
  3 | 
  4 | IHDR��>a�tEXtSoftwareAdobe ImageReadyq�e<�IDATx���U�0G���{H7�    &H�� �4� aؠ��l��+2$&;��?����cHBpt�e9�� �c�}�?��Gvqf�I�{[�_�� _�W��v�ti�LF    ��]�4�����t�W#��n   
                                                        �uK`��[|����_���%0��-��n    
                                                                                        �uK`��[���]
                                                                                                   =�eyV/��l�yqe�Z%'��~`��=���Ζk+�s�X�#��i�켋 ����7t�o^��HK�pu_
                                          ���zɩ���x�/[�o���"}�o>��v��5e';�>�&�g�瓚�BW��[��=2��0��@@� A@� A�w9���uݷ�(]mi5*�_��{geˏ�m8�w[�^R�����ʞn���,��� �p�%I0�?�7`�2�:�4B>�?�kY^���{�_�������(�u��
                                                                                   ���KL��?���/����ٺ;0��
    at ModuleResolver.resolveDependency (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 12)
    at async visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 3)
    at async visit (/Users/omarjandali/GrubberLLC/Grubber/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

Here is my metro.config.js file:

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { assetExts, sourceExts },
  } = await getDefaultConfig();

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: [...assetExts, 'png', 'jpg', 'jpeg'],
      sourceExts: [...sourceExts, 'jsx', 'js', 'ts', 'tsx'],
    },
  };
})();

I am importing the images here:

const Verified = require('../../Assets/Verified-icon.png');

The path to the images is correct and the file name is correct. It is just not accepting the image for some reason.