react.js how to display multiple error messages

I just got started to react so please bear with me. I don't know exactly what I am doing, I'm just picking those things as I go so I'll do my best to walk you through my mental process when building this.

My intentions are to create a registration component, where the backend returns the validation errors in case there are any in form of an object which has following structure.

{
    "username": [
        "A user with that username already exists."
    ],
    "email": [
        "A user is already registered with this e-mail address."
    ]
}

The state manager that I chose to be using is redux, so this comes back every time when the register function is dispatched.

Since it has this structure I wrote a function to help me decompose it and pick up only on the actual errors (the strings).

    const walkNestedObject = (obj, fn) => {
        const values = Object.values(obj)

        values.forEach(val =>
            val && typeof val === "object" ? walkNestedObject(val, fn) : fn(val))
    }

now I want to display them in the view, so I wrote another function which is supposed to do that

    const writeError = (value) => {
        return <Alert message={value} type="error" showIcon />
    }

Down in the actual component I am calling it as this:

{(props.error) ? walkNestedObject(props.error, writeError) : null}

To my surprise if I console.log the value above return in writeError it works flawlessly, every single error gets printed, but none of them gets rendered.

To debug this I've tried multiple variations and none of them seemed to work, I even called the writeError function in the component as

{writeError('test')} 

and it worked for some reason.

At this stage I'm just assuming there's some react knowledge required to fulfil this task that Im just now aware of.

EDIT: A mock example can be found over here Also, I've tried using the first two answers and when mapping through the errors I get this

Unhandled Rejection (TypeError): props.error.map is not a function

with other variations, it mentions the promise from so I'd include how I manage the API request

export const authSignup = (username, email, password1, password2) => dispatch => {
    dispatch(authStart());
    axios.post('http://127.0.0.1:8000/rest-auth/registration/', {
        username: username,
        email: email,
        password1: password1,
        password2: password2
    })
        .then(res => {
            const token = res.data.key;
            const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
            localStorage.setItem('token', token);
            localStorage.setItem('expirationDate', expirationDate);
            dispatch(authSuccess(token));
            dispatch(checkAuthTimeout(3600));
        })
        .catch(err => {
            dispatch(authFail(err.response.data))
        })
}