What could cause html select element not to render on the browser?

I have a form in my react project with few input tags and select tags. On the browser the inputs are rendering but the select tags are not rendering. I am using materialize css for the styling. I inspect the elements, the select element is showing on the elements inspection pane and there is no console error about it. What could be the problem and the possible solution? The codes is as show below with screen shots.

import React, { useState, useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import M from 'materialize-css/dist/js/materialize'

function Register() {

    const initialState = {
        pin: '',
        serial_num: '',
        last_name: '',
        first_name: '',
        date: '',
        gender: 'male',
        school: '',
        class: '',
        photo: ''
    }

    const photoRef = useRef();

    const dispatch = useDispatch();

    useEffect(() => {
        const elems = document.querySelectorAll('.datepicker');
        M.Datepicker.init(elems, {
            autoClose: true
        });
    }, []);

    const [regState, setRegState] = useState(initialState)

    const onChange = e => {
        setRegState({ ...regState, [e.target.name]: e.target.value });
    }

    const onSubmit = e => {
        // dispatch();
        setRegState({...regState, 
            photo: photoRef.current.files[0].name
        })
        console.log(regState)
        console.log(photoRef.current.files[0].name);
        setRegState({ ...initialState });
        e.preventDefault();
    }

    return (
        <div className="row">
            <form method='POST'
             onSubmit={onSubmit}
             className="col s12"
             encType="multipart/form-data"
            >

                <div className="input-field col s12">
                    <input id="serial_num" type="text"
                        className="validate" name="serial_num"
                        min="13" max="17" onChange={onChange} required
                        value={regState.serial_num}
                    />
                    <label htmlFor="serial_num">Serial Number</label>
                </div>

                <div className="input-field col s12">
                    <input id="pin" type="password"
                        className="validate" name="pin"
                        min="10" max="15" onChange={onChange} required
                        value={regState.pin}
                    />
                    <label htmlFor="pin">Pin</label>
                </div>

                <div className="input-field col s12">
                    <input id="last_name" type="text"
                        className="validate" name="last_name"
                        onChange={onChange} required
                        value={regState.last_name}
                    />
                    <label htmlFor="last_name">Last Name</label>
                </div>

                <div className="input-field col s12">
                    <input id="first_name" type="text"
                        className="validate" name="first_name"
                        onChange={onChange} required
                        value={regState.first_name}
                    />
                    <label htmlFor="first_name">First Name</label>
                </div>

                <div className="input-field col s12">
                    <input id="date" type="text"
                        className="validate datepicker" name="date"
                        onChange={onChange} required
                        value={regState.date}
                    />
                    <label htmlFor="date">Date of Birth</label>
                </div>

                <div className="input-field col s12">
                    <label>
                        <input name="gender" type="radio" checked value='male' onChange={onChange} />
                        <span>Male</span>
                    </label>
                </div>
                <div className="input-field col s12">
                    <label>
                        <input name="gender" type="radio" value='female' onChange={onChange} />
                        <span>Female</span>
                    </label>
                </div>

                <div className="input-field col s12">
                    <select name='school' id="school" value={regState.school} onChange={onChange} >
                        <option value="" >Select School</option>
                        <option value="nursery"  >Nursery School</option>
                        <option value="primary"  >Primary School</option>
                        <option value="secondary"  >Secondary School</option>
                    </select>
                    <label htmlFor="school">Select School</label>
                </div>

                <div className="input-field col s12">
                    <select name='class' id="class" value={regState.class} onChange={onChange} >
                        <option value="" >Select Class</option>

                    </select>
                    <label htmlFor="class">Select Class</label>
                </div>

                <div className="input-field col s12">
                    <input id="photo" type="file"
                        className="validate" name="photo"
                        ref={photoRef}
                    />
                    <label htmlFor="photo">Photo</label>
                </div>

                <button className="btn waves-effect waves-light" type="submit" name="action">Submit
                    <i className="material-icons right">send</i>
                </button>
            </form>
        </div>
    )
}