React useContextとカスタムフックの使い分けについて

前提

React
カスタムフックとuseContextの違いについて

この２つの使い分けについて

state・変数・関数をまとめたいときや、どのコンポーネントでも使用できるようにする時にカスタムフックとuseContextがありますが、どちらを使ってもそれは可能かと思います。

この２つの使い分けやできればこっちを使ったほうがいいなど
大きな違いはあるのでしょうか。

その状況が発生しているコード

カスタムフック

import { useEffect, useMemo, useState } from "react";
import { useNavigate } from 'react-router';
import { useCallback } from 'react';
import axios from 'axios';

 const useProvider =(props) => {

  const[data,setdata]=useState([])

  useEffect(()=>{
    axios.get('http://webservice.recruit.co.jp/hotpepper/large_area/v1/?format=json&key=***')
        
    .then(function(nn){
  setdata(nn.data.results.large_area)
    })
    .catch(error => console.log(error))
    
  },[])

  const history=useNavigate()

  const branch1=useCallback((t)=>{
switch (t.target.value) {
  case 10:
history('/North')
    break;
  case 20:
history('/East')
break;
  case 30:
history('/West')
    break;

  default:
    return;

}
  },[])

  const rock= {branch1,data}

  return rock
};

export default useProvider;

useContext

import { createContext, useEffect, useMemo, useState } from "react";
import { useNavigate } from 'react-router';
import { useCallback } from 'react';
import axios from 'axios';

export const Context = createContext();

 const Provider =(props) => {

const { children } = props;
  const[data2,setdata2]=useState([])

  useEffect(()=>{
    axios.get('http://webservice.recruit.co.jp/hotpepper/large_area/v1/?format=json&key=***')
        
    .then(function(nn){
  setdata2(nn.data.results.large_area)
    })
    .catch(error => console.log(error))
    
  },[])

  const history=useNavigate()

  const branch2=useCallback((t)=>{

switch (t.target.value) {
  case 10:
history('/North')
    break;
  case 20:
history('/East')
break;
  case 30:
history('/West')
    break;

  default:
    return;

}
  },[])


  return (
    <Context.Provider value={{branch2,data2}}>
      {children}
    </Context.Provider>
             )
};

export default Provider;

関数を使うファイル

import { memo } from "react";
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import style from '../style.module.css'

import { Context } from "./globalstate";
import { useContext } from "react";

import useProvider from "./customfook";

const Preselect=memo((props)=>{

            // useContextから呼び出し
          const {branch2,data2}=useContext(Context)
            
           // カスタムフックから呼び出し
          const rock=useProvider()

return(    
    <>
     <button onClick={rock.branch1} value={10}>ボタン1</button>
    <button onClick={branch2} value={20}>ボタン2</button>
    <button onClick={branch2} value={30}>ボタン3</button>
    </>
)
})

export default Preselect;