Refactor React Components Code Using Context API - reactjs

Question

I am suppose to refactor this code. The task is to avoid passing username, updateUsername all the way down and without passing props directly. I am suppose to do this without using any third party library or framework.
This is the code
import { useState } from "react";
export default function App() {
const [username, setUsername] = useState("owais");
const [otherUsername, setOtherUsername] = useState("calvin");
return (
<>
<User username={username} updateUsername={setUsername} />
<User username={otherUsername} updateUsername={setOtherUsername} />
</>
);
}
function User({ username, updateUsername }) {
return (
<div>
Username: {username}
<UsernameEditor username={username} updateUsername={updateUsername} />
</div>
);
}
function UsernameEditor({ username, updateUsername }) {
return (
<div>
<input
type="text"
value={username}
onChange={(e) => updateUsername(e.target.value)}
/>
</div>
);
}
I decided to use ContextAPI but I cannot seem to find a way to achieve this without either duplicating the user component and userNameEditor component code or passing the props directly to the component. Any ways I can achieve this?
This is what I currently have
import { createContext, useContext, useState } from "react"
interface AppContextInterface {
username: string;
setUsername: Function;
otherUsername: string;
setOtherUsername: Function;
}
const AppCtx = createContext<AppContextInterface | null>(null);
export default function App() {
const [username, setUsername] = useState("owais");
const [otherUsername, setOtherUsername] = useState("calvin");
const value = { username, setUsername, otherUsername, setOtherUsername };
return (
<AppCtx.Provider value={value}>
<User />
<OtherUser />
</AppCtx.Provider>
);
}
function UsernameEditor() {
const appContext = useContext(AppCtx);
return (
<div>
<input
type="text"
value={appContext?.username}
onChange={(e) => appContext?.setUsername(e.target.value)}
/>
</div>
);
}
function User() {
const appContext = useContext(AppCtx);
return (
<div>
Username: {appContext?.username}
<UsernameEditor />
</div>
);
}
function OtherUserEditor() {
const appContext = useContext(AppCtx);
return (
<div>
<input
type="text"
value={appContext?.otherUsername}
onChange={(e) => appContext?.setOtherUsername(e.target.value)}
/>
</div>
);
}
function OtherUser() {
const appContext = useContext(AppCtx);
return (
<div>
Username: {appContext?.otherUsername}
<OtherUserEditor />
</div>
);
}