diff --git a/packages/react-providers/src/election/use-election-provider.ts b/packages/react-providers/src/election/use-election-provider.ts
index f18e460a..0e3749e1 100644
--- a/packages/react-providers/src/election/use-election-provider.ts
+++ b/packages/react-providers/src/election/use-election-provider.ts
@@ -38,6 +38,10 @@ export const useElectionProvider = ({
 }: ElectionProviderProps) => {
   const { client: c, localize } = useClient()
   const { state, actions } = useElectionReducer(c, data)
+
+  // If id and election data are both provided, it will fetch election info with the updated election.
+  const [mergeElection, setMergeElection] = useState<boolean>(!!id && !!data)
+
   const {
     client,
     csp,
@@ -168,6 +172,14 @@ export const useElectionProvider = ({
     fetchElection(id)
   }, [state.id, id, client, loading.election, loaded.election, fetchElection])
 
+  // fetch election whenever the election id changes. This is useful if election data is provided,
+  // and you want to fetch the latest data anyway
+  useEffect(() => {
+    if (!id || !mergeElection || !client || loading.election) return
+
+    fetchElection(id).finally(() => setMergeElection(false))
+  }, [client, data, election, fetchElection, id, loading.election, mergeElection])
+
   // check census information
   useEffect(() => {
     if (!fetchCensus || !election || !loaded.election || loading.census || !client.wallet) return