It is generally a bad idea to manipulate the DOM directly in React. Instead, rely on hooks and states to update variables that will be interpolated into your template instead.

In this case, it makes sense to create a new state using the useState hook to allow reading and writing of your image URL, and then use the setter returned by useState to update the value.

Moreover, some handful tips:

1. You should use useEffect() and add the event listener on render
2. You should also return a function in useEffect() to ensure that your scroll event listener is properly removed to avoid potential memory leaks and allow for garbage collection
3. You can simplify your if/else statement into a simple ternary statement
4. You might want to manually invoke onScroll() for the first time, especially if the user may arrive at the page with a cached scroll position (i.e. user does not start from top of page)

With all these points in mind, here is an improved version of your code:

const [image, setImage] = useState('images/Passport Stock Photo.svg');

useEffect(() => {
  const onScroll = () => {
    setImage(window.scrollY > 100 ? 'images/ccpLogo.svg' : 'images/Passport Stock Photo.svg');
  };

  // Note: Listen to scroll event
  window.addEventListener('scroll', onScroll);

  // Optional: Handle scenario where user arrives at a pre-scrolled position (non-zero scrollY on load)
  onScroll();

  // Note: Clean up to avoid memory leaks
  return () => {
    window.removeEventListener('scroll', onScroll);
  };
}, []);

return (
  <img src={image} alt="Info-Background" />
);

You basically need to use useRef, which could be better for performance. Remember that useState will trigger a re-render. But in fact, you just need to update the source of your image. I would use something like this.

import { useCallback, useEffect, useRef } from "react";

import "./styles.css";

export default function App() {
  const imgRef = useRef();
  const middleRef = useRef();

  const onScroll = useCallback(() => {
    if (imgRef != null) {
      var scrollValue = window.scrollY;
      if (scrollValue > 100) {
        imgRef.current.src = "https://picsum.photos/id/237/200/300";
      } else {
        imgRef.current.src = "https://picsum.photos/seed/picsum/200/300";
      }

      console.log(scrollValue);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", onScroll, true);
    return () => {
      window.removeEventListener("scroll", onScroll, true);
    };
  }, [onScroll]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <div ref={middleRef} className="middle" />
      <img
        ref={imgRef}
        src={"https://picsum.photos/seed/picsum/200/300"}
        alt="Info-Background"
      />
    </div>
  );
}

Here is the link. You can check it working on codesandbox. https://codesandbox.io/s/ecstatic-https-hzi5n