Cannot get token

I wanna make a function that, When i submit the form i want to send the username and room name to the server to exchange for an access token, and if there's a token, my Room component will be rendered and you can see the roomName being rendered. However when i click the submit button, nothing happened. What's wrong with my codes?

VideoChat.js:

import React, { useState, useCallback } from "react";
import Lobby from "./Lobby";
import Room from "./Room"
function VideoChat() {
  const [username, setUsername] = useState("");
  const [roomName, setRoomName] = useState("");
  const [token, setToken] = useState(null);

  const handleUsernameChange = useCallback((event) => {
    setUsername(event.target.value);
  }, []);

  const handleRoomNameChange = useCallback((event) => {
    setRoomName(event.target.value);
  }, []);

  const handleSubmit = useCallback(
    
    async event => {
      event.preventDefault();
      const data = await fetch("/video/token", {
        method: "POST",
        body: JSON.stringify({
          identity: username,
          room: roomName,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((res) => res.json());
      setToken(data.token);
    },
    [username, roomName]
  );

  const handleLogout = useCallback((event) => {
    setToken(null);
  }, []);

Lobby.js:

import React from "react";

const Lobby = ({
  username,
  handleUsernameChange,
  roomName,
  handleRoomNameChange,
  handleSubmit
}) => {
  return (
    <form onSubmit={handleSubmit}>
      <h2> Enter a room </h2>{" "}
      <div>
        <label htmlFor="name"> Name: </label>{" "}
        <input
          type="text"
          id="field"
          value={username}
          onChange={handleUsernameChange}
          required
        />
      </div>{" "}
      <div>
        <label htmlFor="room"> Room name: </label>{" "}
        <input
          type="text"
          id="room"
          value={roomName}
          onChange={handleRoomNameChange}
          required
        />
      </div>{" "}
      <button type="submit"  > Submit </button>{" "}
    </form>
  );
};

export default Lobby;


  return (
    <div>
      {token ?   (<div><Room roomName={roomName} token={token} handleLogout={handleLogout} /></div>)
      : (<div>
      <Lobby
          username={username}
          roomName={roomName}
          handleUsernameChange={handleUsernameChange}
          handleRoomNameChange={handleRoomNameChange}
          handleSubmit={handleSubmit}
        />
        </div>)
       }
    </div>
  );
}
export default VideoChat;

Room.js:

import React, { useState, useEffect } from "react";
import Video from "twilio-video";

const Room = ({ roomName, token, handleLogout }) => {
  const [room, setRoom] = useState(null);
  const [participants, setParticipants] = useState([]);

  const remoteParticipants = participants.map(participant=> {
    <p key={participant.sid}>{participant.identity}</p>
  })

  useEffect(() => {
    const participantConnected = participant => {
      setParticipants(prevParticipants => [...prevParticipants, participant]);
    };
    const participantDisconnected = participant => {
      setParticipants(prevParticipants =>
        prevParticipants.filter(p => p !== participant)
      );
    };
    Video.connect(token, {
      name: roomName
    }).then(room => {
      setRoom(room);
      room.on('participantConnected', participantConnected);
      room.on('participantDisconnected', participantDisconnected);
      room.participants.forEach(participantConnected);
    });
  });

  return (
    <div className="room">
      <h2>Room: {roomName}</h2>
      <button onClick={handleLogout}>Log out</button>
      <div className="local-participant">
        {room ? (<p key={room.localParticipant.sid}>{room.localParticipant.identity}</p>) : ''}
      </div>
      <h3>Remote Participants</h3>
      <p>{remoteParticipants}</p>
    </div>
  )
};

export default Room;

Sandbox link: https://codesandbox.io/s/video-chat-y67nv?file=/src/Lobby.js