[chakra-ui]スマホサイズの場合のみクリック時にモーダルを出したい

前提・実現したいこと

chakra-uiを使ってフロントエンドの画面作成をしています。
その際に、スマホサイズの場合に検索inputをクリックするとモーダルを表示したいのですが、
どのようにすればいいのかわかりません。
cssを変更する場合はheight={{ base: 3, lg: 10 }}のように書けばいいのですが、コンポーネント自体を変えるとなるとどのように書くのが一般的でしょうか。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

スマホサイズの場合のみクリック時にモーダルを出したい

該当のソースコード

<InputGroup height={{ base: 3, lg: 10 }} m={{ base: 2, lg: 3 }}>
          <Input
            pr="4.5rem"
            type="text"
            placeholder="Enter your breed"
            onClick={ここでスマホ画面の場合のみモーダルを出したい}
          />
          <InputRightElement width="4.5rem">
            <IconButton
              aria-label="Search database"
              icon={<SearchIcon />}
              onClick={handleClick}
              h={{ base: '1.5rem', lg: '1.75rem' }}
              size="sm"
            />
          </InputRightElement>
        </InputGroup>