While using useMediaQuery hook, getting error: Rendered more hooks than during previous render

Question

I am trying to hide a tooltip on mobile devices. For this, I am using useMediaQuery to detect the width like this:

const isMobile = useMediaQuery({ query: '(max-width: 767px)' })

Then I am passing isMobile to a ReactTooltip component as the prop disabled.

<ReactTooltip  disable={isMobile} id="favouriteMeeting"  place="bottom" effect="solid">
    Make Favourite
</ReactTooltip>

But whenever I click on a meeting, I am getting this error -

Rendered more hooks than during the previous render

. What am I doing wrong? Please help!