Image not loading in React component but works in vanilla JavaScript version

I'm facing an issue where an image fails to load within a React component, although it works perfectly fine in a vanilla JavaScript version of the same functionality. I'm seeking assistance in resolving this discrepancy.

GitHub Repository:Link to GitHub repository with full code

Code Pen: Code Pen

Problem: The React component, ImageEffect.jsx, is expected to display an image with a shader effect applied to it. However, the image fails to load within the React component, while it loads correctly in the vanilla JavaScript version.

GitHub Repository of ImageEffect.jsx

function App() { const [screenLoading, setScreenLoading] = useState(true); useEffect(() => { setTimeout(() => { setScreenLoading(false); }, 4110); }, []); const handleTransitionComplete = () => { setScreenLoading(false); }; const imageUrl = "https://r4.wallpaperflare.com/wallpaper/355/966/399/wednesday-addams-wednesday-tv-series-movie-characters-jenna-ortega-emma-myers-hd-wallpaper-394f36bed076a736bd7e274d4e9a7b24.jpg"; return ( <> {screenLoading ? ( <IntroPage onTransitionComplete={handleTransitionComplete}/> ) : ( <BrowserRouter> <> <ImageEffect imageUrl={imageUrl} /> </> </BrowserRouter> )} </> ); } export default App; 

Attempts to Solve:

1. Verified the correctness and accessibility of the image URL.
2. Checked for errors in the browser console, but none were reported.
3. Compared the React component code with the vanilla JavaScript version, but couldn't identify any significant differences causing the issue.

In attempting to address the issue of the image not loading within the React component, I initially verified the correctness and accessibility of the image URL to ensure that it points to a valid image resource. Subsequently, I inspected the browser console for any error messages, yet none were reported during the execution of the React component.