AntD css-in-js removing the original props of AntD component - antd

Question

I am trying to customize AntD using css-in-js. I am able to customize the component very successfully but run into an issue during instantiation. The props for the original AntD component are no longer available. This is a big issue. Does anyone have any work arounds to maintain the full props of the original AntD component.
I have used styled-components to style the AntD button , but am not able to retain the props.
const StyledButtonPrimary = styled(Button)
.ant-click-animating-node {
display: none;
}
&& {
border-width: 1px;
border-style: solid;
border-color: ${red500};
margin: 0;
background-color: ${red500};
border-radius: 4px;
color: ${white};
font-family: inherit;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
text-align: center;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
white-space: nowrap;
&:hover {
border-color: ${red700};
background-color: ${red700};
color: ${white};
}
&:active{
border-color: ${red700};
background-color: ${red500};
box-shadow: inset 0 0 0 1px ${red700};
animation-duration: 0s;
animation: none;
animation-fill-mode: none;
}
};
The code below is the styled button but I no longer have access to any of the original AntD Button props.
<StyledButtonPrimary >
Primary Button
</StyledButtonPrimary>