How to avoid using the CSS !important Rule here in my code?

Question

I am trying to give color on hover to the anchor tag it is not working, When I give !important then the style gets applied. I am using emotion JS where I am exporting the file and importing that style in the component, The solution I need is to apply the color without using !important.

Here is the code:

import { css } from '@emotion/react';

const ErrorStyles = css({
  color: '#c34922',
  textDecorationColor: '#c34922',
  '&:hover': {
    color: '#c34922 !important',
    textDecorationColor: '#c34922 !important',
  },
});

export {ErrorStyles };

/** @jsxImportSource @emotion/react */
import {ErrorStyles} from './ErrorScreenStyles';

const ErrorScreen=()=>{
return(
<>
 <a href="https://www.google.com/" target="_blank" css={ErrorStyles}>
  Create an account.
 </a>
</>
)
}
export default ErrorScreen;