老師 關於react hook的問題

# 具体遇到的问题
問題如下，可以指導我能怎麼修改嗎能回答下列問題嗎? 沒有思路QQ
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

/* eslint-disable */

import React, { useState, useContext } from "react";

import "./styles.css";

export const AppContext = React.createContext();

/*

 # 目標

   1. 用戶可修改文字框的值

   2. 按下 Change Value 鈕也能改變文字框的值

 

 # 題目

   1. 請描述發生的問題？

   2. 發生問題的原因？

   3. 針對此問題的解法？

   4. 是否有其它方式可從根本避免此問題發生？

   5. 有其它想法或觀察嗎？

*/

function ContextInput() {

const [context, _] = useContext(AppContext);

const [inputData, setInputData] = useState(context);

return (

<div>

     <div>Context value: {inputData}</div>

     <input

       type="text"

       value={inputData}

       onChange={(e) => setInputData(e.value)}

     />

   </div>

);

}

function ContextButton() {

const [_, setContext] = useContext(AppContext);

return (

<button onClick={() => setContext(Math.random().toString())}>

     Generate Random number

   </button>

);

}

export default function App() {

const [context, setContext] = useState(0);

return (

<AppContext.Provider value={[context, setContext]}>

     <ContextInput />

     <ContextButton />

   </AppContext.Provider>

);

}