How to use @chakra-ui/core

}}
<Heading mb="10" textAlign="center">
 ENTER
</Heading>
<Input
 id="username"
 type="text"

}}
<Box overflow="auto" m="5">
 {[...messages]
  .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
  .map(m => (
   <Text
    fontSize="xs"
    key={m.id}
 <div ref={chatRef} />
</Box>
<Box
 overflow="auto"
 p="5"
  <Text fontSize="m" key={u.socket}>
   {u.username}
  </Text>
<Input
 placeholder="Write message..."
 value={message}
 onChange={e => setMessage(e.target.value)}
></Input>
<Button variantColor="green" type="submit" disabled={!message}>
 Send
</Button>

}}
<Heading mb="10" textAlign="center">
 ENTER
</Heading>
<Input
 id="username"
 type="text"

}}
<Box overflow="auto" m="5">
 {[...messages]
  .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
  .map(m => (
   <Text
    fontSize="xs"
    key={m.id}
 <div ref={chatRef} />
</Box>
<Box
 overflow="auto"
 p="5"
  <Text fontSize="m" key={u.socket}>
   {u.username}
  </Text>
<Input
 placeholder="Write message..."
 value={message}
 onChange={e => setMessage(e.target.value)}
></Input>
<Button variantColor="green" type="submit" disabled={!message}>
 Send
</Button>