:root CSS variable change in React with <input type=color/> The code done with little knowledge in React therefore I am sure there must be plenty of errors. hope you can give some ideas for the best practiceimport React from 'react';export class Header extends React.Component {    constructor(props){        super(props);        this.state = {color: '#ff0000'};    }    handleColor(event) {        this.setState({color: event.target.value});        document.documentElement.style.setProperty('--base',this.state.color);    }    render () {        return (            <header>                <div className=container header>                    <h1>Header here</h1>                    <input                        type=color                        value={this.state.color}                        onChange={(e) => this.handleColor(e)}                    />                </div>            </header>        );    }}
:root variable change change in React with input type color
javascript;html5;dom;react.js