I am trying to create a React component in TypeScript, and I want to have a dynamic component that will wrap each of the child nodes that are passed to my component. The component is called Slider and here’s how I want it to work:

1. Children are passed to the component

<Slider wrapper='div'>
    <p>Slide 1</p>
    <p>Slide 2</p>
    <p>Slide 3</p>
</Slider>

2. Component logic wraps each child node in whatever component/string passed to the Slider component. If you pass:

<Slider wrapper='div'>...</Slider>

You’ll get:

<div>
    <p>Slide 1</p>
</div>

And if you pass:

<Slider wrapper={MyComponent}>...</Slider>

You’ll get:

<MyComponent>
    <p>Slide 1</p>
</MyComponent>

I wanted to be able to accept all the props within the component and then render everything with logic inside the component, but I keep getting a Typescript error:

Type { children: ReactNode; } has no properties in common with type IntrinsicAttributes. ts(2559)

I’ve looked at some other Stack Overflow questions and some Github issues, but I haven’t found solutions that help with my problem. I could certainly be overthinking or glossing over something obvious, so whatever help you can offer, I’m willing to hear!

Here’s my component code so far:

import { PropsWithChildren, ReactElement, ReactNode } from "react";

type SliderProps = PropsWithChildren<{
    wrapper?: string | (() => ReactElement);
}>;

export default function Slider({
    children,
    wrapper: Wrapper = "div",
}: SliderProps) {
    return <Wrapper>{children}</Wrapper>; // error on this line under <Wrapper>
}