I am trying to call function received from context in hook useEffect.

I am getting function (searchUser) and obj (user) from context and then I am trying to call this function (searchUser) in useEffect and due to calling this function I get data in user obj from context.

Every thing is ok, till I am not trying to output data in return like that: {user.login}

Function searchUser written in context file:

const [user, setUser] = useState(null)
    
function searchUser(login){

    fetch(`https://api.github.com/users/${login}`)

    .then((response) => {
        if(response.ok){
            console.log(response)
            return response.json()
        }
    })
    .then((data) => {
        setUser(data)
    })
    .catch((error) => {
        console.error(error)
    })
}

File User.jsx, where I trying to output the user.login

import React, {useEffect, useContext} from "react"
import {useParams} from "react-router-dom"
import GithubContext from "../context/GithubContext.jsx"

function User(){
    const {login} = useParams()
    const {user, searchUser} = useContext(GithubContext)

    useEffect(() => {
        searchUser(login)
    }, [])

    return(
        <div>{user.login}</div>
    )
}

export default User;

IDE console output:

IDE console output screenshot

Even when I am using

// eslint-disable-next-line react-hooks/exhaustive-deps

It doesn't help

Browser console output:

Browser console output

I would be very grateful for help