Redux failing to work correctly with gatsby-ssr

I'm at a loss, trying to setup ssr for gatsby, but running into trouble adding a redux provider to components. If I provide the store/provider directly in the index, redux works as expected. But using this method, I always receive an error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

Isn't this already done in ReduxWrapper.js?

//gatsby-ssr.js
import wrapWithProvider from "./src/state/ReduxWrapper";
export const wrapRootElement = wrapWithProvider;

//gatsby-browser.js
import wrapWithProvider from "./src/state/ReduxWrapper";
export const wrapRootElement = wrapWithProvider;

//ReduxWrapper.js
import React from "react";
import { Provider } from "react-redux";
import configureStore from "./configureStore";

const store = configureStore();

export default ({ element }) => <Provider store={store}>{element}</Provider>;



//index.js(main)
import * as React from "react";
import SwitchThemeMode from "../components/ThemeToggle/ThemeToggle";

const Root = () => {
    return <SwitchThemeMode />;
};

export default Root;



//ThemeToggle.tsx
import { Button } from "@mui/material";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { toggleTheme } from "../../state/reducers/layout";
import { RootState } from "../../state/ReduxStore";

const SwitchThemeMode: React.FC = () => {
    const { theme } = useSelector((state: RootState) => state.layout);
    const dispatch = useDispatch();

    return (
        <Button
            onClick={() =>
                dispatch(
                    toggleTheme({
                        mode: "dark",
                    })
                )
            }
        >
            {theme === "dark" ? "moon" : "sun"}
        </Button>
    );
};

export default SwitchThemeMode;