Передача данных между элементами React

Пытаюсь разобраться, как передавать данные между siblings-компонентами. Идея такая: нужно сделать так, чтоб класс active был только у одного child-компонента (Можно было выделить только один div). Вот код:

    import React, {useState, useEffect} from 'react';
    import styleFromCss from './Garbage.module.css';
    const ChildComponent = (props) => {
        const [style, setStyle] = useState(`${styleFromCss.childComponent}`);
        const [active, setActive] = useState(false)
    const setActiveStyle = () => {
        console.log("setActiveStyle");
        if (!active) {
            setStyle(`${styleFromCss.childComponent} ${styleFromCss.active}`)
            setActive(true)
        } else {
            setStyle(`${styleFromCss.childComponent}`);
            setActive(false)
        }
};
    //console.log(props);
    console.log(`id ${props.id} style ${style}`);
    return (
        <div className={style} onClick={() => {
            props.updateData(props.id, () => setActiveStyle())
        }}>
            <h3>{props.name}</h3>
        </div>
    )
    };
const ParentComponent = (props) => {
    const state = [{'id': 0, 'name': 'один'}, {'id': 1, 'name': 'два'}, {'id': 2, 'name': 'три'}];
    const [clicked, setClicked] = useState(null);
    const highlight = (id, makeChildActive) => {
        //console.log("click! " + id);
        setClicked(id);
        makeChildActive();
    };
    return (
        <div>
            {state.map(entity => <ChildComponent updateData={highlight}
                                                 key={entity.id}
                                                 id={entity.id}
                                                 name={entity.name}
                                                 isActive={(entity.id === clicked) ? styleFromCss.active : null}
            />)}
        </div>
    )
};
export default ParentComponent;

css файл:

.childComponent{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}
.active{
    background-color: blueviolet;
}

Я пытался реализовать это через хуки, не классы. В результате при клике у выбранного компонента свой меняются классы, а у его siblings ничего не происходит. Как я понимаю, они попросту не перерисовываются. Вопрос такой, как это исправить? И такой подход для реализации заданной цели правильный? Или моя идея в корне не верна, буду благодарен за совет)))

Ссылка на код: https://codepen.io/slava4ka/pen/rNBoJGp