Я не могу применять эффект на всех экранах с react

У меня есть проблема, чтобы применять эффект, который применяется, когда я делаю scroll на экране, и что должен применяться, если свойство - true. Когда он инициализирует app, и я она перехожу с одного сайта на другой функционируй, но когда я это делаю во второй раз в programs недостаток, а именно, он продолжает применять это несмотря на то, что я прохожу с ним false. по, что не удается? Спасибо! это мой код:

app.js-> здесь я перемещаю его свойство true для того, чтобы он применил или нет эффект на компонент float player.

<Route path="/" exact render={(props) => <Home {...props} FloatPlayerVisible={true} />}/>

<Route path="/programas" exact render={(props) => <Programs {...props} FloatPlayerVisible={false} />} />

Home.js получает параметр и это применяет на компоненте.

<FloatPlayer  handleEffectScroll={this.props.FloatPlayerVisible} />

Program.js также это получает

export default function ProgramSection(props){


    return(
            <div>
                <ProgramsSection handleEffectScroll={props.FloatPlayerVisible} />
                <FloatPlayer handleEffectScroll={props.FloatPlayerVisible}/>
            </div>

        )
    }

И в конце концов в FloatPlayer посредством jquery я это применяю.

floatplayer.js

export default class FloatPlayer extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {

        if (this.props.handleEffectScroll == true) {

            $('.float-player').addClass('hide-play');

            $(window).scroll(function () {
                if ($(document).scrollTop() > 400) {
                    $('.float-player').removeClass('hide-play').addClass('show-play')
                } else {
                    $('.float-player').removeClass('show-play').addClass('hide-play')
                }
            })
        } else {
            $('.float-player').removeClass('hide-play').addClass('show-play')
        }

    }

return (
            <React.Fragment>

                <div className="row float-player"> 
                  .....codigo
                </div>
            </React.Fragment>
)

}