Reactjs – React component not recognizing function in another component

I am new to react.js and node.js, and I am trying to make a live chat room. I made a function called Chat in a component called Chat.js, but when I tried to call it in the other component that contained everything else, there was an error that said that the function was not defined.

I tried reordering the way I called things, but I’m not sure what else to try, since I am new to this. I expect the html elements to show up on the page, which they do not currently:

Chat.js

function Chat({ socket, username, room }) {
    return (
        <div>
            <div className="chat-header">
                <p>Live Chat</p>
            </div>
            <div className="chat-body"></div>
            <div className="chat-footer">
                <input type="text" placeholder="Hey..." />
                <button>►</button>
            </div>
        </div>
    );
}
export default Chat;

App.js

import './App.css';
import io from "socket.io-client";
import React, { useEffect, useState } from "react";

const socket = io.connect("http://localhost:3001");

function App() {
  const [username, setUsername] = useState("");
  const [room, setRoom] = useState("");


  const joinRoom = () => {
    if (username !== "" && room !== "") {
      socket.emit("join_room", room);
    }
  };

  return (
    <div className="App">
      <h3>Join A Chat</h3>
      <input type="text" placeholder="John..." onChange={(event) => {setUsername(event.target.value)}} />
      <input type="text" placeholder="Room ID..." onChange={(event) => {setRoom(event.target.value)}} />

      <button onClick={joinRoom}>Join A Room</button>

      <Chat socket={socket} username={username} room={room}></Chat>
    </div>
  );
}
export default App;