I have a context provider file with the code as below

contexts.tsx

import React from "react";

export const Ordering = React.createContext({
  ordering: false,
});

export const Ordering2 = React.createContext({
  ordering2: true,
});

Since I may have many more contexts, I want to combine/Compose them.

Based on the this question Too many React Context providers the code context combiner is as below

combineComponents.tsx

import React from "react";

interface Props {
  components: Array<React.JSXElementConstructor<React.PropsWithChildren<any>>>;
  children: React.ReactNode;
}

export const Compose = (props: Props) => {
  const { components = [], children, ...rest } = props;

  return (
    <>
      {components.reduceRight((acc, Comp) => {
        return <Comp {...rest}>{acc}</Comp>;
      }, children)}
    </>
  );
};

As mentioned in the solution in the question, I am trying to use this in the App as below but I get the error as shown in the picture

App.tsx

export const App = () => {

    return (
      <Compose components={[Ordering, Ordering2]}>
        <div className="app">
          <EateryInfo orderStatus={Ordering} />
          <MenuButton orderStatus2={Ordering2} />
        </div>
      </Compose>
    );
}

If I do not use the combiner, I use the context providers as below & it works just fine.

Can you please guide me on what is wrong. Thanks.

export const App = () => {

    const [ordering, setOrdering] = useState(false);
   const [ordering2, setOrdering2] = useState(false);
    
  const handleOrdering = () => {
    setOrdering((s) => !s);
    };
    
    const handleOrdering2 = () => {
      setOrdering2((s) => !s);
    };

    return (
        <Ordering.Provider value={{ ordering: ordering }}>
            <Ordering2.Provider value={{ ordering2: ordering2 }}></Ordering2.Provider>
        <div className="app">
          <EateryInfo orderStatus={Ordering} />
          <MenuButton orderStatus2={Ordering2} />
        </div>
      </Ordering.Provider>
    );
}