Error in socket.io "expression cannot be called" in React/Next

Question

I’m trying to make a Real Time Chat with socket.io with Next.js, but when it comes to importing and putting as constant is returning an error, I don’t understand because I’m about to make this code I’m studying by websites and videos.

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
import queryString from 'query-string';

const ENDPOINT = 'http://localhost:3000/';

let socket;

export default function Chat(location){
const [name, setName] = useState('');
const [room, setRoom] = useState('');
const ENDPOINT = 'localhost:3000/';



useEffect(() => {
    const { name, room } = queryString.parse(location.search);

    socket = io(ENDPOINT);

    setRoom(room);
    setName(name);
}, [ENDPOINT, location.search])

return(
    <h1>Olá</h1>
)}

Error on line 19 socket = io(ENDPOINT);:

import io
This expression is not callable.
  Type 'typeof import("c:/Users/Claudio/codigos/Labmistry/client/node_modules/socket.io-client/build/index")' has no call signatures.ts(2349)

On line 20 already:

setRoom(room);

he says:

const room: string | string[]

Argument of type 'string | string[]' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'string[]' is not assignable to type 'SetStateAction<string>'.
    Type 'string[]' is not assignable to type 'string'.ts(2345

On line 21:

setRoom(name);

he says:

const name: string | string[]

Argument of type 'string | string[]' is not assignable to parameter of type 'SetStateAction<string>'.
  Type 'string[]' is not assignable to type 'SetStateAction<string>'.
    Type 'string[]' is not assignable to type 'string'.ts(2345)

If anyone knows how to fix it, please help me.

Answer 1

On line 19:

According to the documentation of socket.io-client you must import the io as follows: import { io } from "socket.io-client";

In yours was missing the {}

Lines 20 and 21 errors are saying that you are trying to assign a string array to a string variable.

Checks whether name, room are, in fact, string type. (plays on the console.log ;) ) If they are arrays even, you can do so: setRoom(room.join(""))