Is there a way of adding a validation message, and setting the html <input> as invalid for a MDBSelect, with required, after a form is submitted and nothing has been selected? Just like MDBInput works.

example:

import React, { Component } from 'react';
import {
    MDBRow,
    MDBCol,
    MDBValidation,
    MDBBtn,
    MDBSelect,
    MDBInput,
} from 'mdb-react-ui-kit';

export default class MyForm extends Component {
    constructor (props) {
        super(props)
        this.state = {
            force: this.props.force || '',
            area: this.props.area || '',
            name: this.props.name || '',
        }
        this.handleSubmit = this.handleSubmit.bind(this)
        this.setSelectValue = this.setSelectValue.bind(this)
        this.handleInputChange = this.handleInputChange.bind(this)
    }
    handleSubmit (event) {
        fetch('/api/myform', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(this.state)
        })
    }
    setSelectValue (field) {
        return (value) => this.setState({[field]: value})
    }
    handleInputChange (event) {
        this.setState({[event.target.name]: event.target.value});
    }
    render () {
        return <MDBValidation noValidate onSubmit={this.handleSubmit}>
            <MDBRow className='g-3'>
                <MDBCol size='12'>
                    <MDBRow className='g-3'>
                        <MDBCol sm='6' md='4'>
                            <MDBSelect id='force' label='Force' required 
                                data={[
                                    {text: 'Maximum', value: 3},
                                    {text: 'Medium', value: 2},
                                    {text: 'Minimum', value: 1},
                                ]}
                                invalid
                                validation='Please select one.'
                                getSelectedValue={this.setSelectValue('force')}
                            />
                        </MDBCol>
                        <MDBCol sm='6' md='4'>
                            <MDBSelect id='area' label='Area' required 
                                data={[
                                    {text: 'Big', value: 3},
                                    {text: 'Medium', value: 2},
                                    {text: 'Small', value: 1},
                                ]}
                                invalid
                                validation='Please select one.'
                                getSelectedValue={this.setSelectValue('area')}
                            />
                        </MDBCol>
                        <MDBCol size='12' md='4'>
                            <MDBInput id='name' name='name' label='Name' required
                                type='text'
                                value={this.state.name}
                                invalid
                                validation='At least 3 characters.'
                                pattern='[A-Za-z0-9_]{3,}'
                                onChange={this.handleInputChange}
                            />
                        </MDBCol>
                    </MDBRow>
                </MDBCol>
                <MDBCol size='12' className='text-center'>
                    <MDBBtn type='submit'>Confirm</MDBBtn>
                </MDBCol>
            </MDBRow>
        </MDBValidation>
    }
}

The MDBSelect fields inital state is empty with normal border, which is what a want, but when the submit button is pressed, I'd like to see them red with the validation message bellow them. The MDBInput, from the example, has that exact behavior.

I tried to use the browser validity check on the MDBSelect inputs but with no sucess

handleSubmit (event) {
    let inputs = event.target.getElementsByTagName("input")
    for (let input of inputs) {
        if (input.name !== undefined && input.name !== '') continue
        input.setCustomValidity("")
        console.log(`id: ${input.id}, type: ${input.type}, value: '${input.value}'.`)
        console.log(input.validity)
        if (input.value === undefined || input.value.length === 0) {
            input.setCustomValidity("invalid")
        }
    }
    let valid = event.target.checkValidity();
    console.log('form validity', valid)
}

The form validity is true when the MDBInput is valid, despite the MDBSelect being empty.

obs: my MDB React version is actually PRO Essential 1.0.0-beta7, but the forum's question form newest version MDB version is the beta6.