为什么我的测试会抛出警告，无法在现有状态转换期间更新开玩笑

如何解决为什么我的测试会抛出警告，无法在现有状态转换期间更新开玩笑

我正在尝试使用 Jest 和 React-Testing-Library 测试我的组件的功能。我的组件使用 React-Hook-Form 来处理表单提交。但是，即使测试通过，我还是收到此警告？

警告 -

console.error
    Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

测试 -

it('Api is called when valid form data is submitted',async () => {
        const apiMock = _testHelper.setUpPostMock(postResponse);
        const { getByText,getByLabelText } = _testHelper.renderWithRedux(
            <CreateProfileForm isAuthenticated={true} user={{ email: '[e-mail]' }}></CreateProfileForm>,);

        const firstNameInput = getByLabelText('First Name');
        const surnameInput = getByLabelText('Surname');
        const submit = getByText('Submit');

        await waitFor(async () => {
            fireEvent.input(firstNameInput,{ target: { value: 'John' } });
            fireEvent.input(surnameInput,{ target: { value: 'Doe' } });
            fireEvent.click(submit);
        });
        expect(apiMock).toHaveBeenCalled();
    });

组件 -

import React from 'react';
import './CreateProfileForm.css';
import { useForm } from 'react-hook-form';
import Loader from 'react-loader-spinner';
import { RootStore } from '../../State/Store';
import { usedispatch,useSelector } from 'react-redux';
import { createuser } from '../../State/User/UserActions/UserActions';
import { useHistory } from 'react-router-dom';
import { CreateProfileFormProps } from '../../Models/PropTypes';

export default function CreateProfileForm({ isAuthenticated,user }: CreateProfileFormProps) {
    const userState = useSelector((state: RootStore) => state.user);

    const { register,handleSubmit,errors } = useForm();
    const dispatch = usedispatch();
    const history = useHistory();

    const onSubmit = (data: any): any => {
        dispatch(createuser(data,user.email));
    };

    if (userState.isUserCreated) {
        history.push('/profile');
    }

    if (isAuthenticated) {
        return (
            <div>
                {userState.isApiBeingCalled ? (
                    <Loader type="oval" color="black" data-testid="spinner"></Loader>
                ) : (
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <div className="form-group">
                            <label htmlFor="email">Email</label>
                            <input
                                name="email"
                                type="email"
                                className="form-control"
                                id="email"
                                value={user.email}
                                disabled
                            ></input>
                            <small>This information was given to us from your authentication provider!</small>
                        </div>
                        <div className="form-group">
                            <label htmlFor="first-name">First Name</label>
                            <input
                                name="firstName"
                                type="text"
                                className="form-control"
                                id="first-name"
                                ref={register({ required: 'First Name cannot be empty' })}
                            ></input>
                            {errors.firstName && <small className="form-error-text">{errors.firstName.message}</small>}
                        </div>
                        <div className="form-group">
                            <label htmlFor="surname">Surname</label>
                            <input
                                name="surname"
                                type="text"
                                className="form-control"
                                id="surname"
                                ref={register({ required: 'Surname cannot be empty' })}
                            ></input>
                            {errors.surname && <small className="form-error-text">{errors.surname.message}</small>}
                        </div>
                        <button className="btn btn-primary" type="submit">
                            Submit
                        </button>
                    </form>
                )}
            </div>
        );
    } else {
        return <div></div>;
    }
}