带TypeScript的样式化组件.attrs

我对如何在TypeScript中使用.attrs（）函数感到有些困惑。说我有以下内容；

BottleBar.tsx：

interface IBottleComponentProps {
  fill?: boolean
}

const BottleComponent = styled.div.attrs<IBottleComponentProps>(({fill}) => ({
  style: {
    backgroundImage: `url("./media/images/${fill ? 'Bottle-Filled.png' : 'Bottle-Empty.png'")`
  }
}))<IBottleComponentProps`
  width: 20px;
  height: 20px;
`;

export default function BottleBar() {

  return (
    <Wrapper>
      <BottleComponent />
      <BottleComponent fill />
    </Wrapper>
  )
}

现在，以上代码可以正常工作，但是我不确定为什么在开始和结束时都需要两次使用IBottleComponentProps-如果没有它，我将得到以下信息：

Type '{ fill: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }, "slot" | ... 254 more ... | "onTransitionEndCapture"> & Partial<...>, "slot" | ... 254 more ... | "onTransitionEndCapture"> & { ...; } & { ...; }'.

另外，在第一个代码示例中，我得到了这样的浏览器日志；

index.js:1 Warning: Received `true` for a non-boolean attribute `fill`.

老实说，这非常令人困惑，并且在这方面，“样式化组件”文档也不是很清楚。 向正确方向的推动将不胜感激。