useToast 에러

사용자 홈 페이지-1 > 질문 입력 컴포넌트 제작 강의에서

textarea에서 토스트 사용 시 에러가 발생해서 문의드립니다...

조건은 잘 먹혀서 코드 문제는 아닌 것 같은데..

7줄 이상이라는 조건이 달성되면 toast를 실행하지 않고 에러가 반환됩니다.

작성 코드

import { useToast } from '@chakra-ui/react'; 

const toast = useToast();

<Textarea
  value={message}
  onChange={(e) => {
    if (e.currentTarget.value) {
      const lineCount = (e.currentTarget.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1;
      if (lineCount > 7) {
        toast({
          title: '최대 7줄까지만 입력가능합니다',
          position: 'top-right',
        });
        return;
      }
    }
    setMessage(e.currentTarget.value);
  }}
/>

에러메세지

혹시나 뭔가 버전이 문제가 되는 걸까 해서 함께 첨부합니다.

package.json

    "@chakra-ui/react": "1.8",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "firebase": "^9.14.0",
    "firebase-admin": "^11.3.0",
    "framer-motion": "^7.6.7",
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-textarea-autosize": "^8.4.0",
    "styled-components": "^5.3.3"