how to use context in components React?

[vizardkill]

I am developing a component in Next JS, when I load the application I load one element in a global context, but when I call the component in the Editor, the context does not exist

This is my block:

`import { Editor } from "grapesjs";

import Navigation from "../../../common/components/core/Navigation/Navigation";

export const NavigatorWidget = (editor: Editor) => {
editor.Components.addType("Header", {
extend: "react-component",
model: {
defaults: {
component: Navigation,
stylable: false,
resizable: false,
editable: false,
draggable: true,
droppable: true,
removable: false,
},
},
isComponent: (el: any) => el.tagName === "NAVIGATION",
});

// En caso de que se necesito mostrar el wiget dentro del panel de herramientas habilitar este fragmento
editor.BlockManager.add("Encabezado", {
    label: `<i class="fa fa-bars fa-4x" aria-hidden="true"></i> <div class='gjs-fonts'>Encabezado</div>`,
    category: "Por defecto",
    content: `<Navigation react-type-component="Navigation" pageProps />`,
});

};
`
This is my component:

`/** @jsxImportSource theme-ui */
import { Fragment, Component } from "react";

// Context
import { PageDataContext } from "../../../../modules/app/context/PageProvider";

// Components
import NavigationLink from "./NavigationLink";
import Logo from "../../utils/Logo/Logo";
import SearchField from "../../utils/SearchField/SearchField";
import MobileNavigation from "./MobileNavigation";

// Icons
import { CloseIcon, MenuIcon, BagIcon } from "../../../icons";

// Styles
import * as mainStyles from "../../utils/main.styles";
import * as styles from "./Navigation.styles";

type State = {
isMenuOpen: boolean;
isLoading: boolean;
context: any;
};

type Props = {
bg: string;
color: string;
};

class Navigation extends Component<Props, State> {
static contextType = PageDataContext;

constructor(props: Props) {
    super(props);
    this.state = {
        isMenuOpen: false,
        isLoading: true,
        context: {},
    };
}

toggleMenu() {
    this.setState((prevState: any) => {
        const { isMenuOpen } = prevState;

        return { isMenuOpen: !isMenuOpen, ...prevState };
    });
}

handlerChandeState(data: State) {
    this.setState(data);
}

render() {
    const { storeInfo, cartItems, categories } = this.context;

    return (
        <div>
            <div
                sx={{
                    ...styles.navigation,
                    bg: "surface-1",
                    color: "text-enfasis-2",
                }}
                className="navigation"
            >
                <div
                    sx={{
                        ...styles.navigationWrapper,
                        variant: "styles.mainContainer",
                    }}
                >
                    <div
                        sx={{
                            display: "flex",
                            flexGrow: [1, 0],
                            alignItems: "center",
                            gap: 3,
                        }}
                    >
                        <div sx={{ display: ["block", "none"] }}>
                            <button
                                sx={{ ...mainStyles.iconButton }}
                                className="navigation-toggle"
                                onClick={() => this.toggleMenu()}
                            >
                                {this.state.isMenuOpen && <CloseIcon />}
                                {!this.state.isMenuOpen && <MenuIcon />}
                            </button>
                        </div>

                        <Logo
                            src={storeInfo.store_info.logo.url}
                            alt={storeInfo.storeTitle}
                        />
                    </div>

                    <div
                        sx={{
                            display: ["none", "block"],
                            overflowX: "auto",
                            scrollbarWidth: "thin",
                        }}
                    >
                        <div sx={{ display: "flex" }}>
                            {categories?.map(({ _id, name }: any) => (
                                <NavigationLink
                                    key={_id}
                                    link="prueba"
                                    label={name}
                                />
                            ))}
                        </div>
                    </div>

                    <div sx={{ display: "flex", gap: 3 }}>
                        <div sx={{ display: ["none", "block"] }}>
                            <SearchField />
                        </div>
                        <button sx={{ ...mainStyles.iconButton }}>
                            <BagIcon />
                            {cartItems.length > 0 && (
                                <div sx={{ ...styles.cartBadge }}>
                                    {cartItems.length}
                                </div>
                            )}
                        </button>
                    </div>
                </div>

                <div sx={{ ...styles.searchFieldMobile }}>
                    <SearchField />
                </div>
            </div>

            <MobileNavigation
                onClose={() => this.toggleMenu()}
                isOpen={this.state.isMenuOpen}
                categories={categories}
            />
        </div>
    );
}

}

export default Navigation;
`

The other thing is how do I preload the JSX styles? I'm using the @theme-ui library

[vizardkill]

The specific case is that the component that renders Grapes JS with React is not able to find the context