I have a problem with getting data in component from context file. I try to send props from context file to necessary component, but I receive empty Object. I attached my code, I don't understand how can I use React Hooks for resolve this problem.

1. App

import SingleRoom from "./pages/SingleRoom"
import {BrowserRouter, Routes, Route } from "react-router-dom";
import {RoomProvider} from "./context";

function App() {
  return (
    <RoomProvider>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/rooms/:slug" element={<SingleRoom />} />
        </Routes>
      </BrowserRouter>
    </RoomProvider>
  );
}

2. context

import items from "./data"

const RoomContext = React.createContext();
class RoomProvider extends Component {
    state = {
        rooms: []
    };

    getRoom = slug => {
        let tempRooms = [...this.state.rooms];
        const room = tempRooms.find(room => room.slug === slug);
        return room;
    };

    render() {
        return (
            <RoomContext.Provider
                value={{...this.state, getRoom: this.getRoom}} >
            {this.props.children}
          </RoomContext.Provider>
        )
    }
}
const RoomConsumer = RoomContext.Consumer;
export {RoomProvider, RoomConsumer, RoomContext};

3. Singleroom

import { Link } from 'react-router-dom'
import { RoomContext } from '../context'

export default class SingleRoom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slug: this.props.match.params.slug
    };
  }
  
  static contextType = RoomContext;
  
  render() {
    const { getRoom } = this.context;
    const room = getRoom(this.state.slug);

    return (
      <div>SingleRoom</div>
    )
  }
}