React - HTML attribute(widthやdisplay等)をpropsでコンポネントに渡した時に、ブラウザの開発者画面で、そのHTML attributeを表示させないワークアラウン

Question

styled-componentで再利用性の高いatoms/moleculesコンポネントを作ろうとしております。
簡単なstyleも再利用できるように作りたいと考えており、具体的なイメージとしては
MaterialUiでいうBoxコンポネントのようにwidthやdisplayをpropsとして渡せるような感じです。

ここで問題となるのはwidthやdisplayのようなHTML attributeをpropsとして渡すと
ブラウザのコンソール画面でHTMLElementのタグ上に<div width=xxx display=yyy>と表示されてしまうことです。
これを表示させないためのワークアラウンドがあれば教えていただけますか。
おそらく受け取ったpropsを基にclassを作るのが良いのかと思いますがその方法も思いつきません。
（MatterialUiのソースコード通りに作れとか、widthをWidthにしろとか言われればそうなのですができれば別解が欲しいです）

以下ソースコートです。

Boxコンポネント

import React from 'react';
import styled from 'styled-components';

interface BoxProps {
  display?: 'flex' | 'grid';
  width?: string;
}

const Box:React.FC<BoxProps> = props => <BoxDiv {...props} />

const BoxDiv = styled.div<BoxProps>`
  ${props => !props.display ? null : `display: ${props.display};`}
  ${props => !props.width ? null : `width: ${props.width};`}
`

export default Box;