ref.current is null in next.js

Question

const inputRef = useRef<HTMLTextAreaElement>(null);
const [submitClicked, setSubmitClicked] = useState<boolean>(false);

const focus = () => {
  console.log('click')
  console.log(inputRef.current)
    if (inputRef.current) {
        console.log('inputRef.current')
        inputRef.current.focus();
        setSubmitClicked(true);
     }
  }

const isInvalid = submitClicked && textareaValue.length === 0;

<PurpleTextarea
   value={textareaValue}
   onChange={textHandleChange}
   placeholder=""
   size="xs"  
   backgroundColors="white" 
   borderSize="lg"   
   textSize="md"       
   entire={50}        
   ref={inputRef}
   className={isInvalid ? 'border-error-main' : 'border-purple-main1'}
 />
 <Button onClick={focus}>submit</Button>

when i click button i want to execute focus function but inputRef.current is null.

i think it is rendering issue but i don't no how to solve this problem. I want to do when I click the button but textareaValue.length === 0 then textareaValue borderColor changed to error-main