Context Provider not working in Next with Typescript

const SelectedContext = React.createElement<SelectContext>('selected')

Creating a context is done using createContext, not createElement. Additionally, you need to do this outside of RoomsCards, so you're not creating a brand new context on every render. And finally, your default value "selected" doesn't match the type you specified, so you'll need to change that to satisfy typescript.

interface SelectContext {
  selected: number;
  setSelected: (e: any) => void;
}
const SelectedContext = React.createContext<SelectContext>({
  selected: 0
  setSelected: () => {}
});

const RoomsCards = ({ rooms }: IRooms) => {
  const [currentSelected, setCurrentSelected] = useState<number>();
  return (
    <SelectedContext.Provider value={{ currentSelected, setCurrentSelected }}>
      {React.Children.toArray(
        rooms.map((CurrentRoom: IRoomDetail) => MainCard(CurrentRoom))
      )}
    </SelectedContext.Provider>
  );
};

export default RoomsCards;