How can I use :hover within a React element, using styled-components?

Tried searching for a solution but couldn't find anything that worked/that I understood.

I have an element that gets styled styled-components. The normal CSS rules for it works fine, but I was hoping to apply a hover effect to it. Unfortunately I'm not sure how to do it with the different syntax styled-components uses.

I have a ::hover:{...} rule but when I hover over the element, it doesn't change.

Here's the style-component css:

 //rules for a standard display (contains text that cant be directly edited)
export const EngravingDisplay = styled.p`
display: flex;
align-items: center;
justify-content: center;  

width: ${props => props.inputWidth || "30px"};
height: ${props => props.inputHeight || "30px"};

margin: ${props => props.inputMargin || "5px"};
padding: ${props => props.inputpadding || "5px"};

text-align: center;
font-family: calibri;
font-size: 17px;

background-color: ${props => props.inputBackground || "rgba(100,60,60,1)"};
color: white;

border-radius: ${props => props.inputBorderRadius || "0px"};

::hover: {
    background: rgb(255,255,0);
}
`;

Then, the React/JSX for the component:

<EngravingDisplay
  name="char"
  inputWidth="35px" 
  inputHeight="35px" 
  inputBorderRadius="100%" 
  inputMargin="-2px">                            
    {charInfo.charProficiency}
</EngravingDisplay>

And an image (this particular element is the greenish circle with the text on it):