REACT: При одновременном использовании функциональных и классовых компонентов хук useState стирает state у классового компонента

Я пытаюсь стилизовать элемент кнопки и изменить состояние функционального компонента во время нажатия на него. Ожидаемое поведение: Элемент должен выделиться красным цветом и значение money должно измениться. В реальности же после нажатия на элемент он не выделяется, но значение money меняется. Это всё в независимости от расположения хука setMoney относительно setState класса. Я знаю, что setState асинхронный и пытался делать повторные рендеры, ничего не работало. useMoney каким-то образом влияет на состояние компонента класса. Я пробовал писать через callback'и в setState, но после рендера состояние все равно не меняется. Что можно предпринять в данном случае?

function App() {

    const [drinks, setDrinks] = useState();
    const [money, setMoney] = useState(0);
    const [coinCount1, setCoinCount1] = useState();
    const [coinCount2, setCoinCount2] = useState();
    const [coinCount5, setCoinCount5] = useState();
    const [coinCount10, setCoinCount10] = useState();

    useEffect(() => {
        translateDrinksData();
    }, []);

    class DrinkButton extends React.Component {

        constructor(props) {
            super(props);
            this.state = { isActive: false, lightElement: {} };
            this.press = this.press.bind(this);
        }

        press() {
            if (money >= this.props.drinkCost) {
                let [className, styleName] = (this.state.isActive === false) ? [true, { "boxShadow": "0px 0px 7px #F86868" }] : [false, {}];
                this.setState({ isActive: className, lightElement: styleName });
                setMoney(money - this.props.cost);
            }
        }

        render() {
            let styleName = this.state.lightElement;
            return <button onClick={this.press} className='drinkItem' style={styleName} id={this.props.drinkId}>
                <img className="drinkImg" src={this.props.drinkPath}></img><br />
                {this.props.drinkName}<br />
                Цена: {this.props.drinkCost}<br />
                Кол-во: {this.props.drinkQuantity}<br />
            </button>
        }
    }


    const contents = drinks === undefined
        ? <p>Пожалуйста, обновите страницу после запуска приложения</p>
        : <div id="mainMenu">
            <div id="drinkTable">
                {drinks.map(drink => <DrinkButton id={drink.id} key={drink.id} drinkId={drink.id} drinkPath={drink.path} drinkName={drink.name} drinkCost={drink.cost} drinkQuantity={ drink.quantity } />)}
            </div>
            <div id="buyMenu">
                <p id="moneyCounter" className="kaisei-opti-regular">{money} р</p>
          </div>;

    async function translateDrinksData() {
        const response = await fetch('drink')
        const data = await response.json()
        setDrinks(data);
    }
}

export default App;```