Why should we not update the state directly

Read this first : state

The main reson is that it will not rerender the component which then will not be visible in the UI though it will update the state in background.

There is a function which is defined while initializing the state in this case it is setCount.

Example:

function user({
    const [count, setCount] = useState(0);
    //to update trigger the setCount function passing the new value
    return(
    <div>
    This is the current count = {count}
    
    </div>
)
}