React useEffect Hook fires prematurely in React Testing Library and Enzyme tests - reactjs

Question

I am writing unit tests in React Testing Library and Enzyme for a React component that has a useEffect hook. When I run the tests I get an error from the useEffect hook saying that the accessTheRef function is undefined. If I move the accessTheRef function above the useEffect hook I then get an error that the ref is undefined.
Component:
import React, { useEffect } from 'react';
import { fireEvent, render } from '#testing-library/react';
const RefTest = ({theFunc}) => {
const ref = React.useRef(null);
useEffect(() => {
accessTheRef()
}, [])
const accessTheRef = () => {
const newValue = ref.current?.value
theFunc(newValue)
};
return (
<div>
<input ref={ref} value='defined' readOnly={true}/>
<button type="button" onClick={(e) => accessTheRef()}>
Select text
</button>
</div>
);
};
Test:
describe('<RefTest>', () => {
it('has a null ref in testing environments in the initial call of useEffect', () => {
const theFunc = jest.fn()
const rendered = render(<RefTest theFunc={theFunc} />);
fireEvent(
rendered.getByText('Select text'),
new MouseEvent('click', {
bubbles: true,
cancelable: true,
})
)
expect(theFunc.mock.calls[0][0]).toBe(undefined) // what on earth why
expect(theFunc.mock.calls[1][0]).toBe('defined')
})
});
The code works without any errors in the browser. The error occurs when I run the test with both the React Testing Library tests and the Enzyme tests. It seems like useEffect is not properly deferring and is firing before layout and paint have finished.
Why am I running into these errors in my testing environment? How can I fix this issue in my tests?