You are not cleaning the event listener correctly. This is because you wrap the given callback with a new arrow function. So, removeEventListener will not find an event listener to remove.

You can fix this by removing the arrow function and extracting the e.detail in your customFunction instead.

import React, { useEffect, useState } from "react";

function addOnEvent(event_name, callback){
    document.addEventListener(event_name, callback);
}
function removeEvent(event_name, callback){
    document.removeEventListener(event_name, callback);
}
function App() {
  const [some_state, set_some_state] = useState([]);
    const customFunction = (e) => {
        //some action here setting some_state
        console.log("Console prints multiple times")
    };
  useEffect(() => {
    addOnEvent('custom_event', customFunction)
    return () => {
      removeEvent('custom_event', customFunction)
    };
  }, [some_state]);
  
  return (
    <div className="App">
    </div>
  );
}

export default App;

If you really only want the e.detail in your callback, you can also update the addOnEvent function to return an unlisten function like so:

import React, { useEffect, useState } from 'react';

function addOnEvent(event_name, callback) {
  const listener = e => callback(e.detail);
  document.addEventListener(event_name, listener);
  return () => document.removeEventListener(event_name, listener);
}

function App() {
  const [some_state, set_some_state] = useState([]);
  const customFunction = (e) => {
    //some action here setting some_state
    console.log('Console prints multiple times');
  };
  useEffect(() => {
    const unlisten = addOnEvent('custom_event', customFunction);
    return () => unlisten();
  }, [some_state]);

  return (
    <div className="App">
    </div>
  );
}

export default App;