How to extend styled component without passing props to underlying DOM element? : <p>I have a styled component that is extending a third-party component:</p>

<pre><code>import Resizable from 're-resizable';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) =&gt; props.someProp}px;
`;


const PaneContainer = ({ children, someProp }) =&gt; (
    &lt;StyledPaneContainer
        someProp={someProp}
    &gt;
        {children}
    &lt;/StyledPaneContainer&gt;
);

export default PaneContainer;
</code></pre>

<p>This resulted in the following error in the browser console:</p>

<blockquote>
  <p>Warning: React does not recognize the <code>someProp</code> prop on a DOM
  element. If you intentionally want it to appear in the DOM as a custom
  attribute, spell it as lowercase <code>someProp</code> instead. If you
  accidentally passed it from a parent component, remove it from the DOM
  element</p>
</blockquote>

<p>So, I changed the prop to have a <code>data-*</code> attribute name:</p>

<pre><code>import Resizable from 're-resizable';
...
const ResizableSC = styled(Resizable)``;
export const StyledPaneContainer = ResizableSC.extend`
    flex: 0 0 ${(props) =&gt; props['data-s']}px;
`;


const PaneContainer = ({ children, someProp }) =&gt; (
    &lt;StyledPaneContainer
        data-s={someProp}
    &gt;
        {children}
    &lt;/StyledPaneContainer&gt;
);

export default PaneContainer;
</code></pre>

<p>This works, but I was wondering if there was a native way to use props in the styled component without them being passed down to the DOM element (?)</p>
