I am using custom input element and want to set focus on it after initial render. Here is my custom input element: (simple though)

import React from 'react';

import './Input.scss';



const input = (props) => (

    <input 

        type={props.inputtype} 

        className="input" 

        placeholder={props.hint}

        style={{width: props.width}} {...props}/>

);



export default input;

And this is how I am using it in my functional component:

const SignupPopup = (props) => {



const inputEmailRef = useRef(null);

//...

useEffect(() => {

    inputEmailRef.current.focus();

}, []);



return ( 

   <Input

      inputtype="email"

      hint="Email"

      width="100%"

      id="inputemail"

      ref={inputEmailRef}

      value={email}

      required

      onBlur={emailBlurHandler}

      onChange={inputChangeHandler}

      />);

}

Error:

TypeError: Cannot read property 'focus' of null

All examples and codes that I have seen work only on native <input ref={myRef} /> element but is there any way to do it in custom input element or wrapped input element?