Wyswietlanie/Ukrywanie React/Bootstrap nie działa jak by można oczekiwać

Czołem,
Popełniłam fragment kodu, który w założeniu powinien wywoływać komponent Collapse z biblioteki React-Bootstrap. Niestety nie działa to jak bym oczekiwała, napisane tak, że prościej nie idzie.

this.state = {
            isPredictionsVisible: true,
            isHintsVisible: true,
            isOverviewVisible: true,    
        };
{...}
handlePredictionsVisibility(event){
    this.setState({isPredictionsVisible:!this.state.isPredictionsVisible});
}
{...}
<ClickableButton text='Preds' fn={ this.handlePredictionsVisibility} visibility={true} />

To są trzy fragmenty zapisane w komponencie Home, będącym rodzicem dla komponentów o których za chwilę W kodzie powyżej props o nazwie visibility dotyczy widoczności guzika a nie elementu docelowego, do elementu docelowego jest handler.
To jest fragment potomka Home (są trzy takie potomki o analogicznej budowie)

console.log(this.props.isVisible);
const v=this.props.isVisible;
{...}
<Collapse in={v} >
{...}
</Collapse>

W każdym z nich jest praktycznie taki sam kod.
I co sie dzieje? Ano praktycznie nic. Propsy mają właściwe wartości - po to dałem log z konsoli, ale widoczność elementów się nie zmienia.

Może niestosownie przyznawać się, że zaczęło się pisanie wątku od końca, ale cóż, zrobiłam tak.

Powyższe to próba znalezienia działającej alternatywy dla czysto bootstrapowej konstrukcji z collapse którą sprawdziłam jako pierwszą z beznadziejnym skutkiem.

Guziki wyglądają w niej tak

<CollapsibleButton text='Predictions' target='#predictions' />
<CollapsibleButton text='Overview' target='#overview' />
<CollapsibleButton text='Hints' target='#hints' />

A komponenty obejmuje takiego rodzaju wrapper

MainSection:(props)=> {return (<div id='predictions' className='l-section c-predictions collapse'>{props.children}</div>)},

Ta ostatnia konstrukcja działała o tyle, że po otwarciu strony komponenty były ukryte - czego się należało spodziewać - po kliknięciu pojawiały się - natomiast po ponownym kliknięciu nie chowały się. To ostatnie jest trochę nieścisłe ale wolałam na początek dać info ogólne a potem uszczegółowić. Otóż nie chowały się w sposób stały; po kliknięciu znikały na mgnienie oka i pojawiały się znowu. Nie za każdym razem; czasami nic się nie działo (a przynajmniej nic nie było widać).
Stąd wykorzystanie biblioteki React-Bootstrap o czym na początku.
I teraz skoro naświetliłam co dzieje się w każdym z podejść z osobna, dwa słowa o ich zachowaniu razem (mam oddzielne guziki obsługujące oddzielne podejścia, a komponent docelowy jest w podwójnym wrapperze- zewnetrzny to <Collapse in= {this.props.isVisible}> Otóż jeżeli komponent ukaże się po wywołaniu drugim podejściem, naciśnięcie dowolnego guzika od pierwszego podejścia chowa ten komponent nie wyświetlając nic w zamian.

W zasadzie mam rozwiązanie bezpośrednio zmieniające klasę dla komp. który chcę pokazać/ schować, ale dość poważnie wzięłam się za Bootstrapa i klops. Zwłaszcza szkoda mi biblioteki bootstrap-react, zapowiadała sie ciekawie a tu wpadka przy pierwszym kontakcie.

Jakby mnie ktoś naprowadził na właściwy trop, będę wdzięczna.