Estoy usando un campo de textfield para enviar datos a la base de datos. Quiero hacer que el campo de texto se enfoque cuando el componente se useRef textfield Sin embargo, seguí recibiendo el error: Uncaught TypeError: Cannot read properties of undefined (reading 'focus') .

Mi código:

 const StyledTooltip = styled(Tooltip)(({ theme }) => ({ ... })); const CreateBox = styled(Box)(({ theme }) => ({ ... })); const LoginTextField = styled(TextField)({ ... }); function Create () { const inputRef = useRef(); const [openCreate, setOpenCreate] = useState(false); const toggleCreateWindow = () => { setOpenCreate(!openCreate); }; useEffect(() => { inputRef.current.focus(); }, []) return ( <> <Modal aria-labelledby='create' aria-describedby='create' open={openCreate} onClose={toggleCreateWindow} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500 }}> <Fade in={openCreate}> <CreateBox> <LoginTextField label='Content' variant='outlined' placeholder="Writing something about Japan......" inputRef={inputRef} multiline rows={12} maxRows={14} InputLabelProps={{ style: { color: 'white' } }} inputProps={{ style: { color: "white" } }} /> </CreateBox> </Fade> </Modal> <StyledTooltip title='Create'> <Fab aria-label='create' onClick={toggleCreateWindow}> <EditIcon /> </Fab> </StyledTooltip> </> ); }; export default Create;

¿Es un problema único para el campo de textfield ? Porque funciona bien con el campo de texto html textfield Alguien tiene una idea de lo que está mal con mi código? ¡Muy apreciado!