React useContext() default value has not changed even I provide a value

Why is the UserContext default value has not changed even I specify a value in <UserContext.Provider>? How can I override the default value of the Context?

this is the App.jsx

import './App.css';
import React, { createContext } from 'react';
import ComponentB from './components/hooks/context/ComponentC';

function App() {
  return (
    <div className="App">
      <ComponentB />
    </div>
  );
}

export default App;

this is the ComponentB

import React, { createContext, useState } from 'react';
import ComponentC from './ComponentC';

export const UserContext = React.createContext('default');
export const ChannelContext = React.createContext('default');

const provider = UserContext.Provider;

function ComponentB() {
  return (
    <div>
      <provider value='Username'>
        <ComponentC />
      </provider>
    </div>
  );
}

export default ComponentB;

this is the ComponentC

import React from 'react';
import ComponentE from './ComponentE';

const ComponentC = () => {
  return <ComponentE />;
}

export default ComponentC;

this is the ComponentE

import React, { Component, useContext } from 'react';
import { UserContext, ChannelContext } from './ComponentB';

const ComponentE = () => {
  const username = useContext(UserContext);
  const channel = useContext(ChannelContext);

  return <div>username : {username} channel : {channel}</div>;
}

export default ComponentE;