React inline error with asp.net Model State errors

ApiController.cs

[Route("api/v1/account")]
[AllowAnonymous]
public class ApiController : Controller
{
  [Route("login")]
  public async Task<IActionResult>Login([FromBody] LoginRequest login) 
  {
    if (ModelState.IsValid)
    {
      // ... logic 
    }
    
    return BadRequest(ModelState.ToDictionary(
      kvp => kvp.Key,
      kvp => kvp.Value.Errors.Select(e => e.ErrorMessage).ToArray()
    ));
  }
}

InlineError.tsx

import * as React from 'react'

export const InlineError = ({ field, errors }) => {
  if(!errors) {
    return null
  }

  if(!errors[field])
    return null

  return (<div className='errors-container'>
    <ul>
      {errors[field].map(error => <li>{error}</li>)}
    </ul>
  </div>)
}