Как корректно реализовать переключение булевого состояния showInfo по клику, чтобы блок и открывался, и закрывался?

В React используйте функциональное обновление: setShowInfo(previous => !previous).

Например, <button onClick={() => setShowInfo(v => !v)}>Подробнее</button> и {showInfo && <Info />}. Так каждый клик опирается на актуальное предыдущее состояние; постоянная запись true открывает блок, но не позволяет закрыть его.