输入框自适应输入的内容

我的需求是：每次输出英文分号 ; 就把输入框的长度增加。

  import React, { useEffect, useState } from 'react';
  import  {useRef } from 'react'

  const [inputData , setInputData] = useState('');//输入框的内容
  const [length , setLength] = useState(316);  //初始化输入框的宽度 
  const inputEl = useRef(null);//获取input DOM元素

        <input type="email"  placeholder="请输入用户的邮箱地址"   style={{width:length+'px'}}   ref={inputEl}  onChange={(e)=>{
          setInputData(e.target.value);
          if(e.target.value.substr( e.target.value.length-1,1)==";"){
          //判断处理字符串，如果输入的最后一个字符是英文分号，那么就把输入框的宽度增加130
             setLength(inputEl.current.offsetWidth+130)
            }
        }}/>