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>
  );
}
y 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);
  
  useEffect(() => {
    const peer = new Peer();
    let conn: any;

    peer.on('open', () => {
      conn = peer.connect(id!);
      
      conn.on('open', () => {
        setConnected(true);
        
        // Handle device orientation
        window.addEventListener('deviceorientation', (event) => {
          if (touching) {
            conn.send({
              type: 'motion',
              beta: event.beta,
              gamma: event.gamma
            });
          }
        });
      });
    });

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

  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 ? 'Connected!' : 'Connecting...'}
        </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 ? 'Active' : 'Touch to Move'}
            </div>
          </div>
          <p className="text-sm text-gray-600">
            Touch and hold anywhere on the screen, then tilt your device to move the cursor
          </p>
        </div>
      </div>
    </div>
  );
}

lo que pasa es que tengo este problema en app:

Could not find a declaration file for module 'peerjs'. 'c:/Users/johan/Desktop/phone-mouse-controller/node_modules/peerjs/dist/bundler.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/peerjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'peerjs';`ts(7016)

Parameter 'id' implicitly has an 'any' type.ts(7006)

Parameter 'conn' implicitly has an 'any' type.ts(7006)

y estos problemas en phonecontroller:

'React' is declared but its value is never read.ts(6133)

Could not find a declaration file for module 'peerjs'. 'c:/Users/johan/Desktop/phone-mouse-controller/node_modules/peerjs/dist/bundler.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/peerjs` if it exists or add a new declaration (.d.ts) file containing `declare module 'peerjs';`ts(7016)