Как передать пропс в React

У меня есть React приложение в которое я импортировал сокеты

import io from 'socket.io-client';
const serverUrl = 'http://localhost:3333/';
const socket = io(serverUrl);

Я успешно использую сокеты в данном компоненте, но я хочу пользоваться им в компоненте находящимся ниже по иерархии, поэтому я передаю его в пропс

<CodeField socket={socket} roomId={roomId} fontSize={fontSize} options={options} />

И пытаюсь использовать socket в этом компоненте

const CodeField = ({ roomId, fontSize, socket, options }) => {
  const [code, setCode] = React.useState('const greetings = "Hello World!"');

  React.useEffect(() => {
    socket.emit('sendText', { roomId, code });
  }, [code]);

  const changeHandler = (value) => {
    setCode(value);
  };

  return (
    <div style={{ fontSize: fontSize }} className="code">
      <CodeMirror
        value={code}
        options={options}
        onBeforeChange={(editor, date, value) => changeHandler(value)}
      />
    </div>
  );
};

Смысл в том что на сервере я получаю в консоль undefined каждый раз когда происходит emit событие на сервер

io.on("connection", (socket) => {
    socket.on("sendText", ({roomId, text}) => {
        console.log(text)
        socket.broadcast.to(roomId).emit("getText", text)
    })
})

так же я пробовал экспортировать сокет и подключать его в дочернем компоненте, так он тоже не работает

export const socket = io(serverUrl);

Почему socket не работает в этом компоненте? В чем проблема?