Function called twice react redux toolkit

I am creating a JavaScript application that has the ability to open folders using electron. The front end is written in Typescript, React and redux toolkit.
Whenever, I click the button to show the open the dialog box, it appears twice, one after the other.
I have tried debugging and found out that the reducer is only being called once but the ipcRenderer function is being called twice.
Below is the code

// Api that talks to electron
export function openFolder() {
  const files: Directory = ipcRenderer.sendSync("open-folder");
  return files;
}

// component that initiates the whole process
const Sidebar: React.FC = () => {

  const { mainDir } = useSelector(getEditor);

  const dispatch = useDispatch();

  const handleDirLoad = () => {
    dispatch(openDir());
  }

  return (
    <div className="sidebar-container" onClick={handleDirLoad}>
      <SidebarMenu dir={mainDir}/>
    </div>
  )

}

// The slice reducer
const editorSlice = createSlice({
  name: "editor",
  initialState,
  reducers: {

    openDir: (state) => {
      let folder = openFolder();
      return {
        ...state,
        mainDir: folder
      }
    }

  }
});