Почему при разных props цвет компонентов остается одинаковым?

        <CreateButton 
            callback={onUserLogin}
            color={'black'}
            width={320}
        >Sign up</CreateButton>
        <Link />

        <CreateButton 
            callback={changePageByMethood(false)}
            color={'green'}
            width={250}
        >Sign in</CreateButton>

CSS:

:root {
    --buttonColor: ; 
}

.button {
    background-color: var(--buttonColor);
    font-family: 'Montserrat', sans-serif;
    color: white;
    border: none;
    padding: 12px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.4s all;
    border-radius: 5px;
}

.button:hover {
    box-shadow: inset 0.2px 0.2px 0px 0.8px var(--buttonColor);
    color: var(--buttonColor);
    background-color: white;
}

Сам компонент:

import classes from './CreateButton.module.css';
import React from 'react';
import { FC } from 'react';

interface ButtonUIProps {
    callback: Function,
    color?: String,
    width?: number,
    children?: String
};


const ButtonUI: FC<ButtonUIProps> = ({callback, color, width, children}) => {

    const handleClick = (event: React.MouseEvent<HTMLElement>): void => {
        event.preventDefault()
        callback()
    }

    const root: any = document.querySelector(':root')
    root.style.setProperty('--buttonColor', color)

    return ( 
        <>
            <button
                style={{width: width}}
                className={classes.button}
                onClick={handleClick}
            >
                {children}
            </button>
        </>
     );
};