mira tengo esto:

import React, { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Peer } from "peerjs";
import { QRDisplay } from "./components/QRDisplay";
import { PhoneController } from "./components/PhoneController";
import { MousePointer2 } from "lucide-react";

function DesktopView() {
  const [peerId, setPeerId] = useState<string>("");
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const peer = new Peer();

    peer.on("open", (id) => {
      setPeerId(id);
    });

    peer.on("connection", (conn) => {
      setConnected(true);

      conn.on("data", (data: any) => {
        if (data.type === "motion") {
          // Convert device motion to cursor movement
          const sensitivity = 2;
          const x = Math.floor(data.gamma * sensitivity);
          const y = Math.floor(data.beta * sensitivity);

          // Move cursor relative to current position
          window.dispatchEvent(
            new CustomEvent("mousemove", {
              detail: { x, y },
            })
          );
        }
      });

      conn.on("close", () => {
        setConnected(false);
      });
    });

    return () => {
      peer.destroy();
    };
  }, []);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-md mx-auto">
          <div className="text-center mb-8">
            <MousePointer2 className="w-12 h-12 mx-auto text-indigo-600" />
            <h1 className="mt-4 text-3xl font-bold text-gray-900">
              Phone Mouse Controller
            </h1>
            <p className="mt-2 text-gray-600">
              Control your computer's cursor using your phone
            </p>
          </div>

          {connected ? (
            <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
              <div className="animate-pulse inline-block w-3 h-3 bg-green-500 rounded-full mr-2" />
              <span className="text-green-800 font-medium">
                Phone Connected!
              </span>
              <p className="mt-2 text-sm text-green-600">
                Your phone is now controlling the cursor
              </p>
            </div>
          ) : (
            peerId && <QRDisplay connectionId={peerId} />
          )}
        </div>
      </div>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DesktopView />} />
        <Route path="/controller/:id" element={<PhoneController />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

tambien tengo esto:

import React from "react";
import QRCode from "qrcode.react";
import { Smartphone } from "lucide-react";

interface QRDisplayProps {
  connectionId: string;
}

export function QRDisplay({ connectionId }: QRDisplayProps) {
  const url = `${window.location.origin}/controller/${connectionId}`;

  return (
    <div className="text-center">
      <div className="mb-6">
        <Smartphone className="w-12 h-12 mx-auto text-indigo-600" />
        <h2 className="mt-2 text-2xl font-bold text-gray-900">
          Connect Your Phone
        </h2>
        <p className="mt-1 text-sm text-gray-500">
          Scan this QR code with your phone's camera
        </p>
      </div>
      <div className="bg-white p-4 rounded-xl shadow-lg inline-block">
        <QRCode value={url} size={256} level="H" />
      </div>
      <p className="mt-4 text-sm text-gray-600">
        Or visit:{" "}
        <span className="font-mono bg-gray-100 px-2 py-1 rounded">{url}</span>
      </p>
    </div>
  );
}

donde ahí  hay un error y es esto: JSX element type 'QRCode' does not have any construct or call signatures.typescript(2604)

tengo esto:

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Peer } from "peerjs";

export function PhoneController() {
  const { id } = useParams();
  const [connected, setConnected] = useState(false);
  const [touching, setTouching] = useState(false);
  const [conn, setConn] = useState(null);

  useEffect(() => {
    const peer = new Peer();

    peer.on("open", () => {
      const connection = peer.connect(id!);
      setConn(connection);

      connection.on("open", () => {
        setConnected(true);

        // Manejar la orientación del dispositivo
        window.addEventListener("deviceorientation", handleOrientation);
      });

      connection.on("close", () => {
        setConnected(false);
        window.removeEventListener("deviceorientation", handleOrientation);
      });
    });

    return () => {
      if (conn) conn.close();
    };
  }, [id]);

  const handleOrientation = (event) => {
    if (touching && conn) {
      conn.send({
        type: "motion",
        beta: event.beta, // Rotación en el eje X
        gamma: event.gamma, // Rotación en el eje Y
      });
    }
  };

  const enviarClick = (button) => {
    if (conn && connected) {
      conn.send({
        type: "click",
        button: button, // 'left' o 'right'
        action: "click", // Acción 'click' para un solo clic
      });
    }
  };

  return (
    <div
      className="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 p-6 select-none touch-none"
      onTouchStart={() => setTouching(true)}
      onTouchEnd={() => setTouching(false)}
    >
      <div className="bg-white/90 backdrop-blur rounded-2xl p-6 max-w-md mx-auto shadow-xl">
        <h1 className="text-2xl font-bold text-gray-900 mb-4">
          {connected ? "Conectado!" : "Conectando..."}
        </h1>
        <div className="text-center">
          <div
            className={`w-32 h-32 rounded-full mx-auto mb-4 ${
              touching ? "bg-green-500" : "bg-gray-200"
            } transition-colors duration-200`}
          >
            <div className="h-full flex items-center justify-center text-white">
              {touching ? "Activo" : "Toca para Mover"}
            </div>
          </div>
          <p className="text-sm text-gray-600 mb-4">
            Toca y mantén presionado en cualquier parte de la pantalla, luego
            inclina tu dispositivo para mover el cursor.
          </p>
          <div className="flex justify-center space-x-4">
            <button
              className="bg-blue-500 text-white px-4 py-2 rounded-lg"
              onClick={() => enviarClick("left")}
            >
              Clic Izquierdo
            </button>
            <button
              className="bg-red-500 text-white px-4 py-2 rounded-lg"
              onClick={() => enviarClick("right")}
            >
              Clic Derecho
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

donde hay un error: Argument of type 'DataConnection' is not assignable to parameter of type 'SetStateAction<null>'.
  Type 'DataConnection' provides no match for the signature '(prevState: null): null'.typescript(2345)

y tengo esto:

const Peer = require("peerjs").Peer;
const robot = require("robotjs");

// Configurar el PeerJS Cliente
const peer = new Peer("pc-controller"); // ID único para este Peer

// Evento cuando el Peer está listo
peer.on("open", (id) => {
  console.log(`Conectado al PeerJS con ID: ${id}`);
  console.log("Comparte este ID con tu teléfono para conectar.");
});

// Evento cuando se establece una conexión
peer.on("connection", (conn) => {
  console.log("Teléfono conectado.");

  conn.on("data", (data) => {
    console.log("Datos recibidos:", data);

    // Manejar datos de movimiento
    if (data.type === "motion") {
      const { x, y } = data;
      moverMouse(x, y);
    }

    // Manejar clics
    if (data.type === "click") {
      const { button, action } = data;
      controlarClick(button, action);
    }
  });

  conn.on("close", () => {
    console.log("Teléfono desconectado.");
  });
});

// Función para mover el mouse
function moverMouse(x, y) {
  const velocidad = 2; // Ajusta la sensibilidad según preferencia
  const posActual = robot.getMousePos();
  const nuevoX = posActual.x + x * velocidad;
  const nuevoY = posActual.y + y * velocidad;
  robot.moveMouse(nuevoX, nuevoY);
}

// Función para controlar los clics
function controlarClick(button, action) {
  if (action === "down") {
    robot.mouseToggle("down", button);
  } else if (action === "up") {
    robot.mouseToggle("up", button);
  } else if (action === "click") {
    robot.mouseClick(button);
  }
}


no se si es mejor ponerlo aqui en mi index.tsx:

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);