React Context or React.cloneElement

I would like to implement role based system of permissions in React app.
The idea is that components are not coupled with any permissions provider (they are not aware about any permissions provider at all). Instead of that the permissions provider recursively iterates through its children and applies permission to them by cloning them using React.cloneElement.

Here is my POC:

import Permissions from './Permissions';
import './App.css'

function Test({ children, disabled }) {
  return (
    <div>
      <input disabled={disabled} type="text" placeholder="Inside test" />
      {children}
    </div>
  )
}
Test.displayName = "Test";

function App() {
  return (
      <div>
        <Permissions permissions={{ shouldBeReadonly: true }}>
          <input type="text" placeholder="This input is readonly" />
          <Permissions permissions={{ colorInput: true }}>
            <input type="text" placeholder="This input is colored red" />
            <div>
            <input type="text" placeholder="This input is nested" />
            <div>
              <input></input>
            </div>
            <Permissions permissions={{ colorInput: true, shouldBeReadonly: false }}>
              <input type="text" placeholder="This input is colored red, not readonly" />
              <Test>
                <Permissions permissions={{ colorInput: true, shouldBeReadonly: true }}>
                  <input type="text" placeholder="Child of test" />
                  <span>Span</span>
                </Permissions>
              </Test>
            </Permissions>
            </div>
          </Permissions>
        </Permissions>
        <Permissions permissions={{ colorInput: true }}>
          <input type="text" placeholder="This input is colored red, not readonly" />
        </Permissions>
      </div>
    );
}

export default App;

where permissions.js looks as follows:

function Permissions({ children, permissions }) {
  // Function to apply permissions to each child
  const applyPermissions = (child) => {
    console.log(child.type?.name || child.type);
    if (!React.isValidElement(child)) return child;

    const newProps = {};
    // Apply readOnly based on permissions
    if (permissions.shouldBeReadonly && child.type === 'input') {
      newProps.readOnly = true;
    }
    // Apply color based on permissions
    if (permissions.colorInput && child.type === 'input') {
      newProps.style = { ...child.props.style, backgroundColor: 'red' };
    }
    // Apply readonly to <Test> component
    if (permissions.colorInput && typeof child.type === 'function' && child.type.name === 'Test') {
      newProps.disabled = true;
    }

    // Recurse for nested children, if any
    if (!(typeof child.type === 'function' && child.type.name === 'Permissions') && child.props.children) {
      newProps.children = React.Children.map(child.props.children, applyPermissions);
    }
    return React.cloneElement(child, newProps);
  };

  // Apply permissions to children
  return (
    <>
      {React.Children.map(children, applyPermissions)}
    </>
  );
}

export default Permissions;

Another option would be to use React Context to provide permissions to the components. But in such case I have to couple components to React Context:

const Input = () => {
  const { shouldBeReadonly } = useContext(PermissionsContext); // here I bind the component and breaking SOLID principle
  return <input type="text" readOnly={shouldBeReadonly} />;
};

The question is which approach to choose, if to prioritize the decoupling but rely on the fragile React.cloneElement implementation or to use React Context but give up on fully following SOLID principles. Any thoughts on this?