Ввод текста не должен терять фокус, если проверка не удалась в ReactJS

Question

В NewFormComponent у меня onBlur на первом входе, который проверяет, является ли fname "", затем консоль "Проверка не удалась"

Требование: текстовое поле не должно терять фокус, пока пользователь не введет какое-либо значение или не пройдет валидацию. Другими словами, до тех пор, пока проверка не пройдена, пользователь не может выбирать или вкладывать другие текстовые поля в той же форме.

Я пытался использовать ref и вызывать метод focus (), но это текстовое поле, чтобы получить фокус, но пользователь все еще может выбирать другие текстовые поля.

import React, { Component } from 'react'

export default class NewFormComponent extends Component {
  constructor(props) {
    super(props)

    this.state = {
       fname:"",
       lname:""
    }

    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  handleChange(e){
      this.setState({
          [e.target.name]:e.target.value
      })
  }
  onFormSubmit(e){
      e.preventDefault();
      console.log(`Hi ${this.state.fname} ${this.state.lname}`)
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
            <input type="text"
                name="fname" 
                value={this.state.fname}
                onChange={this.handleChange}
                onBlur={()=>{
                    if(this.state.fname === ""){
                        console.log("Validation failed");
                    }
                }}
            />
            <input type="text"
             name="lname" 
             value={this.state.lname} 
             onChange={this.handleChange}/>
            <input type="submit" value="submit"/>
        </form>
      </div>
    )
  }
}

Ожидание: текстовое поле не должно терять фокус, пока проверка не пройдена