My image is not changing to another image in React on a darkmode click handler

Question

Converting a vanilla javascript file to react and I'm trying to get an image to change when the dark mode button is clicked I'm having trouble getting it to work in React do I use onClick or onChange or maybe something else to accomplish this? Whenever I try to change it I just get an empty PNG instead of a changed image. To clarify, when I first load the page the first image shows up correctly. So I believe its just my changeImage function that's not working and I'm struggling to figure out why.

On another note, I don't believe my local storage command is working either because when I switch to dark mode and then reload the page, it's going back to light mode instead of staying in dark mode.

Thank you.

import React from "react";
import logo from "../images/portfolio logo option 2.png";
import darklogo from "../images/devjon darkmode.png";

function About() {
  
//changeImage function

  function changeImage() {
    let image = document.getElementById("myLogo");
    if (image.src.match({ logo })) {
      image.src = "/images/";
    } else {
      image.src = { darklogo };
    }
  }

  function changeImage2() {
    let image = document.getElementById("myLogo");
    if (image.src.match({ darklogo })) {
      image.src = "/images/";
    } else {
      image.src = { logo };
    }
  }

  //dark mode button

  function darkMode() {
    let darkMode = localStorage.getItem("darkMode");

    const darkModeToggle = document.querySelector("#dark-mode-toggle");

    const enableDarkMode = () => {
      changeImage();
      // 1. Add the class to the body
      document.body.classList.add("darkmode");
      // 2. Update darkMode in localStorage
      localStorage.setItem("darkMode", "enabled");
    };

    const disableDarkMode = () => {
      changeImage2();
      // 1. Remove the class from the body
      document.body.classList.remove("darkmode");
      // 2. Update darkMode in localStorage
      localStorage.removeItem("darkMode");
    };

    // If the user already visited and enabled darkMode
    // start things off with it on
    if (darkMode === "enabled") {
      enableDarkMode();
      changeImage();
    }

    // When someone clicks the button
    darkModeToggle.addEventListener("click", () => {
      // get their darkMode setting
      darkMode = localStorage.getItem("darkMode");

      // if it not currently enabled, enable it
      if (darkMode !== "enabled") {
        enableDarkMode();
        // if it has been enabled, turn it off
      } else {
        disableDarkMode();
      }
    });
  }

  //return the HTML
  return (
    <div>
      {/* devJon logo */}
      <div className="logo">
        <img
          src={logo}
          id="myLogo"
          onClick={changeImage}
          alt="devJon logo"
          className="dev-jon"
        />
      </div>
     
      {/* Darkmode Button */}
      <div>
        <button
          id="dark-mode-toggle"
          className="dark-mode-toggle"
          onClick={darkMode}
        >
          <svg
            width="20%"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 550 550"
          >
            <path
              fill="currentColor"
              d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z"
              transform="translate(-8 -8)"
            />
          </svg>
        </button>
      </div>
    </div>
  );
}

export default About;