React button select change color - reactjs

Question

I am trying to create a selectable button, so that it is easy, medium and difficult to choose when creating a task in the form
In this case, when he clicks on the easy, changing to the color is choosing, as for example:
easy: green
medium: yellow
high: red
my tsx component looks like this
interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
name: string;
}
const Priority: React.FC<IButtonProps> = ({ name, ...props }) => {
const inputRef = useRef<HTMLButtonElement>(null);
const [priority, setPriorite] = useState("");
const { fieldName, defaultValue, error, registerField } = useField(name);
useEffect(() => {
registerField({
name: fieldName,
ref: inputRef.current,
path: "value",
});
}, [fieldName, registerField]);
return (
<Container
ref={inputRef}
isActive={priority === "Low"}
activeColor="red"
defaultValue={defaultValue}
{...props}
/>
);
};
And my styled-component looks like this
interface RadioBoxProps {
isActive: boolean;
activeColor: string;
}
const colors: { [key: string]: any } = {
red: "red",
green: "green",
blue: "blue",
};
export const Container = styled.button<RadioBoxProps>`
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
border: 2px solid;
font: 1rem Poppins;
background: transparent;
border-radius: 0.25rem;
transition: border-color 0.2s;
background: ${(props) =>
props.isActive ? colors[props.activeColor] : "transparent"};
`;
I would like to know the bug that when I select it, it doesn't have the color assigned to it to be sent to the backend