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

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;