I have this problem when I use nested contexts, it works fine when I just use one context. and this is the link of codesandbox, you can reproduce the problem: demo

App.js

import Demo1 from './demo1'
import {createContext} from 'react'
export const NumCxt = createContext(0)
export const UpdateNumCxt = createContext(null)
export default function App() {
  return (
    <div className="App">
      <Demo1/>
    </div>
  );
}

demo1.jsx

import React from 'react'
import { useContext, useState, createContext } from 'react';
import {NumCxt, UpdateNumCxt} from './App'
function Demo1() {
  const [num, updateNum] = useState(3)
  return (
    <>
      <UpdateNumCxt value={updateNum}>
        <NumCxt.Provider value={num}>
            <Middle/>
        </NumCxt.Provider>
      </UpdateNumCxt>
    </>
  )
}

...
...
...