我的项目中有一个托管输入元素。我发现了两种方法来关注输入：使用useRef（空）：

import React, { useEffect, useRef, useState } from "react"
import classes from './MainInput.module.css'

const MainInput = () => {
    const [inputValue, setInputValue] = useState('Wanna find out speed?')
    const inputHandler = (event) => {setInputValue(event.target.value)}

    useEffect(()=>{
      inputRef.current.focus()
    },[])
    
    const inputRef = useRef(null)
  return (
    
    <section className={classes.typespace}>
        <div className={classes.wrapper}>
            <input type="text" ref={inputRef}  className={classes.mainInput} 
            value={inputValue} onChange={inputHandler} />
        </div>
    </section>
  )
};

export default MainInput;

并使用autoFocus属性：

<input type="text" autoFocus className={classes.mainInput} value={inputValue} onChange={inputHandler} />

但这两种方法都将光标定位到右侧。
我需要光标/插入符号位于行首，就像我刚开始键入一样，但同时，初始的题字不会消失（如果是占位符，题字会消失）

重要的细节，我只想用Javascript/React来做这个如何让光标立即聚焦在文本的左侧？