Defining hooks inside an array

I would like to create a bunch of filters to pause or play my Video. My implementation is something like as shown below:

const Player = () => {
  const playFilters = [useIsPageVisible(), useIsInViewport(videoElement)];
  const player = useInitPlayer();

  useEffect(() => {
    if (player) {
      if (playFilters.every((filter) => filter)) {
        player.play()
      } else {
        player.pause()
      }
    }
  }, [player, playFilters])

return <Player player={player}/>
}

I know defining hooks inside an if condition is not correct. But how about defining them as above? Could it be done in a better way?