Set React Select drop down to be required in form

Building a react application. Inside a form I can use required on the input field, so if the post back is made on the button it will flag if the input field is empty. This does not work for the react-select.

What am I missing please?

<form onSubmit={this.handleSubmit}>

  <div className="field generalField">
    <label className="label">
      Membership <span className="required">*</span>
    </label>
    <div className="control">
      <Select
        options={membershipOptions}
        name="membership"
        className="state-search-choices"
        classNamePrefix="state-search-choices"
        onChange={this.handleDropDownChange}
        value={this.chosenMembership ? this.chosenMembership : null}
        required
        />
    </div>
  </div>

  <div className="field generalField">
    <label className="label">
      Company Name <span className="required">*</span>
    </label>
    <div className="control">
      <input
        name="companyName"
        className="input is-large"
        type="text"
        required
        onChange={this.handleChange}
        />
    </div>
  </div>

The drop down is working as expected and posts back the correct selection. if selected. But required is not working.

I have looked at similar Q's such as react-select dropdown to be required but to no avail...

UPDATE So not sure what is happening here, first off please bear in mind I am learning react so it may be my fault causing the issue but I have stripped the class down to the bear basics and created a codesandbox https://codesandbox.io/s/delicate-sound-srm2fw?file=/src/App.js

Here is my actual code: (I know the codebox is using App and I am using a class..if that makes a difference?)

So it doesnt work in my project it still flags the input field 'Company Name' as being required first...but in the sandbox it works as expected flagging the drop down first...What am I doing wrong?

import React, { Component } from 'react';
import Select from 'react-select';

class MembershipFormPaymentComponent extends Component {
    render() {

        @action
        handleSubmit = async ev => {
            try {
                toast.dismiss();
                ev.preventDefault();

                this.isSubmitting = true;
                const props = this.props;
                const domainStores = props.domainStores;

                //api endpoint call to send email

            } catch (error) {
                this.props.uiStores.errorUiStore.GenerateToastErrors(error);
                console.log(error);
            } finally {
                runInAction(() => {
                    this.isSubmitting = false;
                });
            }
        };
        //populate membership DD
        const membershipOptions = [];
        const option0 = { value: 'Buyer', label: 'Buyer Membership ($75/ month)' };
        const option1 = { value: 'Supplier1', label: 'Supplier Three Membership ($145/ month)' };
        const option2 = { value: 'Supplier2', label: 'Supplier Two Membership ($320/ month)' };
        const option3 = { value: 'Supplier3', label: 'Supplier One Membership ($630/ month)' };
        membershipOptions.push(option0);
        membershipOptions.push(option1);
        membershipOptions.push(option2);
        membershipOptions.push(option3);
        
        return (
            <div>
              <form onSubmit={this.handleSubmit}>
                
                <div className="field generalField">
                  <label className="label">
                    Membership <span className="required">*</span>
                  </label>
                  <div>
                    <Select
                      options={membershipOptions}
                      name="membership"
                      required
                    />
                  </div>
                </div>
                
                <div className="field generalField">
                  <label className="label">
                    Company Name <span className="required">*</span>
                  </label>
                  <div className="control">
                    <input
                      name="companyName"
                      type="text"
                      required
                    />
                  </div>
                </div>
                
                <button type="submit">
                  Submit 
                </button>
                
              </form>
            </div>
        );
    }
}

export default MembershipFormPaymentComponent;
 

Html validation is triggered after the onSubmit event. We wont be using the html validation.

React Select required wont work.

Add code to validate the dropdown before api call

            try {
                toast.dismiss();
                ev.preventDefault();

                this.isSubmitting = true;
                const props = this.props;
                const domainStores = props.domainStores;

                if(!this.chosenMembership)
                {
                    // alert if not chosen
                }
                else
                {
                    //api endpoint call to send email
                }