It is rendering incorrectly when the `page` state changes
I click on the category link and it checks if the link exists in category and then should set `page` state to `category` and likewise if I click on the recipe link it should set `page` state to `recipe`.

The value of `isRecipe` and `isCategory` are correct but it only sets the `page` state correctly after refreshing the page.

It should watch the page state and if this changes then it should re-render the component

How can I re-render the component if the page state changes?

```
const categories = [
 {name: 'first', slug: 'first'}, 
 {name: 'second', slug: 'second'},
]

const recipes = [
 {name: 'firstRecipe', slug: 'firstRecipe'},
 {name: 'secondRecipe', slug: 'secondRecipe'},
]

const Categories = ({ categories, recipe, recipes }) => {
  const router = useRouter()
  const { slug } = router.query

  const isRecipe = !!recipes.find(recipe => recipe.slug === slug)
  const isCategory = !!categories.find(cat => cat.slug === slug)

  const [page, setPage] = useState('')

  useEffect(() => {
    !!isCategory && setPage('category')
    !!isRecipe && setPage('recipe')
    }, [page])

  return (
    <>
      <a href="/first"> category </a>
      <a href="/firstRecipe"> recipe </a>
      {page === 'category' && <Category /> }
      {page === 'recipe' && <Recipes /> }
    </>
  )
}

export default Categories

```