Why I can't update state with Context API - reactjs

Question

I Make Kakaotalk with ReactJS
I make Search User Page now, and I use Context API because use Global State
addFriend/Index.tsx
import Header from "components/friends/Header";
import InputUserId from "./InputUserId";
import Profile from "./Profile";
import { AddFriendProvider } from "./AddFriendContext";
const AddFriend = () => {
<>
<AddFriendProvider>
<Header />
<InputUserId />
<Profile />
</AddFriendProvider>
</>;
};
export default AddFriend;
addFriend/AddFriendContext.tsx
import React, { createContext, useState } from "react";
const AddFriendContext = createContext<any>({
state: {
userId: "",
searchResult: "",
},
actions: {
setUserId: () => {},
setSearchResult: () => {},
},
});
const AddFriendProvider = ({ children }: any) => {
const [userId, setUserId] = useState("");
const [searchResult, setSearchResult] = useState("");
const value = {
state: { userId, searchResult },
actions: { setUserId, setSearchResult },
};
console.log(value);
return (
<AddFriendContext.Provider value={value}>
{console.log(setUserId, setSearchResult)}
{children}
</AddFriendContext.Provider>
);
};
export { AddFriendProvider };
export default AddFriendContext;
addFriend/InputUserId.tsx
import styled from "styled-components";
import Input from "components/common/Input";
import { ChangeEvent, useContext } from "react";
import AddFriendContext from "./AddFriendContext";
const StyledInputWrapper = styled.div`
width: 370px;
height: 80px;
display: flex;
align-items: center;
`;
const InputUserId = () => {
const { state, actions } = useContext(AddFriendContext);
console.log(state, actions);
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
const { value } = event.target;
actions.setUserId(value);
};
const inputStyle = {
width: "100%",
height: "40px",
paddingLeft: "10px",
fontWeight: "bold",
};
const subInputStyle = {
borderBottom: "2px solid lightgray",
focus: "2px solid black",
};
return (
<StyledInputWrapper>
<Input
type="text"
placeholder="카카오톡 아이디를 입력해주세요."
required
inputStyle={inputStyle}
subInputStyle={subInputStyle}
value={state.userId}
onChange={onChange}
/>
</StyledInputWrapper>
);
};
export default InputUserId;
If i change input element in InputUserId.tsx call actions.setUserId(value) but It not worked.
I think login is >
When Change Input, call actions.setUserId and update state.userId
Change Input value when state.userId Update
But it now Worked..
Help me and if some trouble in my code feedback me plz. thanks.