React中Styled Components未被识别，自定义Prop触发DOM警告

我基于reactflow库的Handle组件（及HandleProps）封装了如下Styled组件（代码未贴全，不影响问题排查）：

interface CustomHandleProps extends HandleProps {
  istarget?: boolean;
  zoomedout?: boolean;
  placement: number;
  placementOffset: string;
  nodeSize: string;
  titleMaxLength?: 1 | 2;
  showTitle?: string;
  customTitle?: PointTitleCustomization;
  format?: PointFormat;
}

export const CustomHandle = styled(Handle).attrs(({ type }) => ({ type }))<CustomHandleProps>`
  width: ${({ nodeSize }) => nodeSize};
  height: ${({ nodeSize }) => nodeSize};
  border-radius: ${({ format }) => (format ? (format === 'circle' ? '50%' : '0') : '50%')};
  display: flex;
  border: ${({ zoomedout }) => (!zoomedout ? ' 1px solid #fff' : 'none')};
...
`

组件使用代码如下：

import * as Styled from './diagram-card-edge.styles';
<Styled.CustomHandle
  key={`${edgePosition}-${type}-${index}-${nodeData.id}`}
  id={`${edgePosition}-${type}-${index}-${nodeData.id}`}
  position={position}
  istarget={isTarget}
  type={type}
  zoomedout={zoomedOut}
  isConnectable={!zoomedOut}
  placement={calcEdgePlacement(
    index,
    nodeData.edges[edgePosition]?.nodes as number,
    nodeData.edges[edgePosition]?.alignOffset,
    nodeData.edges[edgePosition]?.align
  )}
  isConnectableStart={!nodeData.lockDiagram}
  placementOffset="-0.3rem"
  nodeSize="0.5rem"
/>;

但React一直抛出以下警告：

Warning: React does not recognize the nodeSize prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase nodesize instead. If you accidentally passed it from a parent component, remove it from the DOM element.
或
Warning: React does not recognize the placementOffset prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase placementoffset instead. If you accidentally passed it from a parent component, remove it from the DOM element.

或

Warning: Received false for a non-boolean attribute zoomedout.
If you want to write it to the DOM, pass a string instead: zoomedout="false" or zoomedout={value.toString()}.
If you used to conditionally omit it with zoomedout={condition && value}, pass zoomedout={condition ? value : undefined} instead.

已确认所有Prop值传递正确，试过相关解决方案但都无效。

环境版本

• React：17.0.2
• Styled-Components：5.3.5

内容的提问来源于stack exchange，提问作者Alvaro Silva