输入框自适应输入的内容

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

  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)
            }
        }}/>