Как вывести ошибки, предоставленные из django API, для каждого поля по отдельности в React JS

У меня есть форма регистрации, и я хочу отображать для каждого поля ошибку валидации, которая приходит из api, как на следующем фото. Я знаю, как создать это на front end, но я не знаю, как найти для каждого поля из моей формы сообщение об ошибке в api.

How I want to look errors

Я хочу знать, как я могу показать красное сообщение, соответствующее каждому полю, основанное на ответе из api.

{email} 
            <label className="label-register">First Name</label>
            <input value={firstName} onChange={updateFirstName} id="first-name" required="true" className="form-input" type="text" />
            
            <label className="label-register">Create a password</label>
            <input value={password} onChange={updatePassword} className="form-input" required="true" type="password"/>

            <label className="label-register">Repeat your password</label>
            <input value={password2} onChange={updatePassword2} className="form-input" required="true" type="password" />

            <div className="term-and-cond">
                
                <p><input type="checkbox" required="true"/>I have read and agree to the Terms and Conditions, the Privacy Policy.</p>
            </div>

            <button type="submit" className="check-email-btn register-btn">Create account!</button>

        </form>

Ответ от API следующий:

{ "email": [ "E-mail уже существует" ], "пароль": [ "Пароль должен содержать одну цифру". ], "пароль2": [ [ "Пароль не совпал" ] }

Вернуться на верх