A frequent (and IMO poor) design pattern I come across in React code are higher order components that do not propagate props to their children:

// No option to pass props to sub-components!
return (
  <SomeHOC
    componentOne={ComponentOne}
    componentTwo={ComponentTwo} />
);

I often want to pass props to these subcomponents. The simplest method is to define a nested component, but this component will be unstable:

function MyComponent({ prop1, prop2 }) {
  // Unstable!!!
  const WrappedComponentOne = (props) => (<ComponentOne prop1={prop1} {...props} />);

  return (
    <SomeHOC
      componentOne={WrappedComponentOne}
      componentTwo={ComponentTwo} 
    />
  );
}

You can create a static wrapper, but that only lets you pass in props you know in advance:

function WrappedComponentOne(props) {
  // No way to pass data from MyComponent!
  return <ComponentOne staticProp="value" {...props} />;
}

function MyComponent({ prop1, prop2 }) {
  return (
    <SomeHOC
      componentOne={WrappedComponentOne}
      componentTwo={ComponentTwo} 
    />
  );
}

The only working solution I have, which seems fairly obtuse, is to use a provider:

export const MyContext = createContext({});

function WrappedComponentOne(props) {
  const myProps = useContext(MyContext);
  return <ComponentOne {...myProps} {...props} />;
}

function MyComponent({ prop1, prop2 }) {
  return (
    <MyContext.Provider value={{prop1}}>
      <SomeHOC
        componentOne={WrappedComponentOne}
        componentTwo={ComponentTwo} 
      />
    </MyContext.Provider>
  );
}

My question is, if I do not control the HOC or sub-components, is there a better way to do this?