ts-issue.md

this is an example of how I want to use the function ... I have an API that gets an id and generates a PDF with React PDF Renderer The API route calls the function to get the component needed to generate the PDF

const Component1 = ({ name }: { name: string }) => {
  return <div>Component1 with name: {name}</div>;
};

const Component2 = ({ age }: { age: number }) => {
  return (
    <div>
      Component2: <span>age: {age}</span>
    </div>
  );
};

const Component3 = () => {
  return (
    <div>
      Component3: <span>no props</span>
    </div>
  );
};

// Example
const components: { [key: string]: React.FC<any> } = {
  component1: Component1,
  component2: Component2,
  component3: Component3,
};

//
export default async function getMappedComponent<T>(id: string, componentProps: T): Promise<React.ReactNode> {
  const Component = components[id]
  if (!Component) {
    throw new Error(`Component with id ${id} not found`)
  }
  return <Component {...componentProps} />
}

In the API, I want to call this Render the PDF with the component I get from the function

import ReactPDF from '@react-pdf/renderer';

// ... (existing code)

pdfRouter.get("/", async (req: Request, res: Response, next: NextFunction): Promise<void> => {
  // ...
  
  try {
    // Render the PDF
    const pdf = await ReactPDF.renderToStream(
      await getMappedComponent(id, {
        user: {
          name: "John Doe"
        }
      })
    )

    // Set HTTP headers
    res.setHeader("Content-Type", "application/pdf")
    res.setHeader("Content-Disposition", "inline; filename=example.pdf")
    pdf.pipe(res)
  } catch (error: unknown) {
    next(new Error((error as Error).message))
  }
  // ...
});

i added the React.FC<any> but this just make everything else good but this any i cant build the project ...