Unable to test React useState hook using Mocha and Enzyme - reactjs

Question

I have a login Component with two inputs one is for username and the other is for password. I have onChange function for both these inputs. I have written some test cases which works fine. I need to write few more test cases which involves testing of initial state and state after updating. I have researched a lot but couldn't find suitable example for useState hooks testing with MOCHA and Enzyme.
My last test case is failing.
Mocha is mandatory for me. Any help please?
Login Component
----------------
import React from 'react'
import { Form, FormGroup, TextInput, Button } from 'carbon-components-react'
import Login16 from '#carbon/icons-react/lib/login/16'
import { PropTypes } from 'prop-types'
function LoginComponent(props) {
const { username, password, onUsernameChange, onPasswordChange, onSubmit } = props;
return (
<div className="bx--row login-box">
<div className="bx--col-xs-6 bx--col-sm-6 bx--col-md-6 bx--col-lg-6 login-form">
<Form className="form-box">
<FormGroup legendText="Login">
<div>Sign in to your account</div>
<TextInput
className="login-input"
id="username"
name="username"
value={username}
onChange={onUsernameChange}
labelText=""
placeholder="User Name"
type="text"
/>
<TextInput
className="login-input"
id="password"
name="password"
value={password}
onChange={onPasswordChange}
labelText=""
placeholder="Password"
type="password"
/>
<Button
className=""
id="login-btn"
onClick={onSubmit}
>
<Login16 className="login-icon"/> Login
</Button>
</FormGroup>
</Form>
</div>
<div className="bx--col-xs-6 bx--col-sm-6 bx--col-md-6 bx--col-lg-6 login-image">
<img src="/ibmlogo.png" alt=""/>
</div>
</div>
)
}
LoginComponent.propTypes = {
username: PropTypes.string,
password: PropTypes.string,
onUsernameChange: PropTypes.func,
onPasswordChange: PropTypes.func,
onSubmit: PropTypes.func
}
export default LoginComponent
Login.test.js
-------------
import React from 'react'
import { shallow } from 'enzyme'
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { spy } from 'sinon'
import LoginComponent from '../components/Login';
describe('Login component testing', () => {
const handleChange = spy();
const props = {
username: "",
password: "",
onUsernameChange: handleChange,
onPasswordChange: handleChange,
onSubmit: () => {}
}
const wrapper = shallow(<LoginComponent {...props}/>);
let input;
beforeEach(() => {
input = ""
})
afterEach(() => {
})
it('Should have two inputs', () => {
input = wrapper.find('.login-input');
expect(input).to.have.length(2);
})
it('Should have one button to handle onSubmit', () => {
input = wrapper.find('#login-btn');
expect(input).to.have.length(1);
})
it('Should have an initial state for username and password to be empty string or undefined', () => {
expect(wrapper.find("#username").prop('value')).to.equal('');
expect(wrapper.find("#password").prop('value')).to.equal('');
})
it('Should have props for onUsernameChange, onPasswordChange, and onSubmit', () => {
expect(wrapper.find('#username').props().onChange).to.not.be.an('undefined');
expect(wrapper.find('#password').props().onChange).to.not.be.an('undefined');
expect(wrapper.find('#login-btn').props().onClick).to.not.be.an('undefined');
})
//below test case is failing.
it('Should update state for username and password onChange', () => {
const func = wrapper.find('#username');
func.simulate('change', { target: { value: "username" } })
console.log(wrapper.find('#username').debug())
expect(wrapper.find("#username").prop('value')).to.equal('username');
})
chai.use(chaiEnzyme());
})