How to share same attributes in styled components?

Question

I am using "useWindowDimensions" from react native:

import { useWindowDimensions } from 'react-native';

I am getting the width and height like this:

const dimensions = useWindowDimensions();

...and passing it as a prop:

return (
    <Component dimensions={dimensions}>
       ...
    </Component>
);

Using styled components I use attributes:

const Component = styledNative(View).attrs((props) => ({
    dimensions: props.dimensions,
}))`
    ${(props) => (console.log(props.dimensions))}
`;

In console log above I am getting what I need.

I want to reuse the same component like this:

const Copy = styledNative(Component)`
    ${(props) => (console.log(props.children[0].props.dimensions))}
`;

I am getting dimensions using 'props.children[0].props.dimensions'.

Is there a better way how to reuse styled component and share same attributes? I do not want to repeat the dimensions prop like this:

return (
    <Component dimensions={dimensions}>
       <Component1 dimensions={dimensions}>
           <Component2 dimensions={dimensions}>
              ...
           </Component2>
       </Component1>
    </Component>
);

I want to use it like this:

return (
    <Component dimensions={dimensions}>
       <Copy>
          ...
       </Copy>
    </Component>
);

Thanks for help.