How to use context in ReactJS

[sayinmehmet47]

I am new on useContext. I have a provider that send my source data to my function called CheckBook.Inside CheckBook I have columns and rows that I can show my sourceData.The thing that I want is to change canceled property(to true or false) when I click on check button that I created.I am also face hardship to explain my question.But I concisely want to know how to use context in react.
This is my sourcedata

const sourceData = [
  {
    tid: 1,
    date: '2020-03-10T10:47:02-05:00',
    credit: 100,
    description: 'initial deposit',
  },
  {
    tid: 2,
    check_no: 1,
    date: '2020-03-10T16:50:59Z',
    debit: 3.14,
    description: 'gum',
    canceled: true,
  },
  {
    tid: 3,
    check_no: 2,
    date: '2020-03-10T16:49:21-05:00',
    debit: 3.14,
    description: 'gum',
  }

];

This is my Provider

const CheckContext = React.createContext({
  entries: [],
  getEntries: async () => {},
  setCancel: async (tid, value) => {},
});

export function CheckProvider(props) {
  const [entries, setEntries] = React.useState(() =>
    sourceData.map((item, rid) => ({
      ...item,
      rid,
      date: new Date(Date.parse(item.date)),
      canceled: !!item.canceled,
    }))
  );

  const contextValue = React.useMemo(() => {
    const setCancel = async (tid, value) => {
      setEntries((currentEntries) =>
        currentEntries.map((item) => ({
          ...item,
          canceled: item.tid === tid ? value : item.canceled,
        }))
      );
    };

    return {
      entries: entries.map((item) => ({ ...item, balance: 0 })),
      setCancel,
    };
  }, [entries]);

  return (
    <CheckContext.Provider value={contextValue}>
      {props.children}
    </CheckContext.Provider>
  );
}

I have a function called CheckBook. It shows my sourceData property in rows and columns.I have created a input element to change canceled propert to true or false.But I dont know how to change it by using context.

// component to render the check book
export function CheckBook(props) {
  const value=React.useContext(CheckContext)
  console.log(value)
  const [sortedField, setSortedField] = React.useState({
    sortBy: '',
  });

  const toggleSort = (key) => {
    let sortBy = 'asc';
    setSortedField({ key, sortBy });
  };

  function renderRows(state) {
    return (
      <>
        {state.entries.map((e, index) => (
          <tr>
            <th scope="row">{e.date.toUTCString()}</th>
            <th scope="row">{e.tid}</th>
            <th scope="row">{e.debit}</th>
            <th scope="row">{e.credit}</th>
            <th scope="row">{e.balance}</th>
            <th scope="row">{e.description}</th>
            <th scope="row">
              <input
                type="checkbox"
                
              ></input>
            </th>
          </tr>
        ))}
      </>
    );
  }

  return (
    <CheckContext.Consumer>
      {(state) => (
        <div className={'tableWrapper'}>
          <table>
            <thead>
              <HeaderRow sortedField={sortedField} toggleSort={toggleSort} />
            </thead>
            <tbody>{renderRows(state)}</tbody>
          </table>
        </div>
      )}
    </CheckContext.Consumer>
  );
}

This is my output how it look like