unable to get the value of input field using this.ref.current.value in react

Question

I am trying to get the value of input field in my form using ref, when the form is submitted, handletagsubmit function is called where I am trying to fetch the value of the input field using this.tagInputRef.current.value, but when I console log this, I am always getting empty string.

Can someone help me to solve this problem.

I am sharing my code below.

    export default class ProfileList extends Component {
    constructor(props){
        super(props);
        this.grade.bind(this);
        this.showMarks.bind(this);
        this.showTestMarks.bind(this);
        this.handleTagSubmit.bind(this);
        this.state={
          showMarks: false, //to display container
          sameContainerId: [], //to open the marks conatainer of same id,
          tag: "",
      };
      this.tagInputRef = React.createRef();

    }



     handleTagSubmit = (e) => {
        console.log(this.tagInputRef.current.value);
        e.preventDefault();
        //let id = e.target.getAttribute("tag-id");
      }


render() {
      let data ;
        if(Object.entries(this.props.student).length !== 0 && !this.props.filter){
            data = this.props.student.students;
          }else if (Object.entries(this.props.student).length !== 0 && this.props.filter){
            data = this.props.student;
          }else{
            return(
                <div className="App">
                  Loading...
                </div>
            )
          }

          let profiles = data.map(items => {
            return (
              <div className="profile" key={items.id}>
                <div className="img__container">
                  <img key={items.id} src={items.pic} alt="profile-pic" width="80%" height="7%"/>
                </div>
                <div className="details">
                  <h1>{items.firstName.toUpperCase() + " " + items.lastName.toUpperCase()}</h1>
                  <div className="bio__data">
                    <p>Email: {items.email}</p>
                    <p>Conapny: {items.company}</p>
                    <p>Skills: {items.skill}</p>
                    <p>Average : {this.grade(items.grades)}%</p>
                    <br/>
                

    <div  marks-id={items.id} 
                          style={ this.state.sameContainerId.find(el => el === parseInt(items.id)) && this.state.showMarks ? {display: "block"} : {display: "none"}}
                          >
                          {/**display the test items */}
                          {this.showTestMarks(items.grades)}
                        </div>
<form tag-id={items.id} onSubmit={this.handleTagSubmit}>
  <input  ref={this.tagInputRef} type="text" placeholder="Add a tag"/>
</form>
                      </div>
                    </div>
                    <div className="button__container">
                        <button show-marks={items.id} onClick={this.showMarks}  
                        className={(this.state.showMarks && (this.state.sameContainerId.find(el => el === parseInt(items.id))))  ? `plus minus`: `plus alt`}></button>
                    </div>
                  </div>
                )
              });
    
            return (
                <div className="App">
                  {profiles}
                </div>
              )
        }
       }