Image is not working as expected

🐛 Bug report

While using the Image component this is what I get.

Unhandled Runtime Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

This is the code snippet

import {Box, Center, Flex, HStack, Image as Img} from '@chakra-ui/react';

I don’t know if I am making a stupid mistake or if this is a real issue

<Box w={100}> <Img src="https://via.placeholder.com/200x60" />   </Box>

🌍 System information

Software	Version(s)
Chakra UI	1.0.3
Browser	Mozilla
Operating System	Windows 10

📝 Additional information

Unhandled Runtime Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

[segunadebayo]

Hi @quarterpound, I’d recommend switching the Image component to Img from @chakra-ui/react when using Next.js

import { Img } from "@chakra-ui/react"

[quarterpound]

That was the problem thank you