How to use forwardref in React 18.X apps

Question

I'm trying to create a select component following the Radix-UI documentation:

https://www.radix-ui.com/primitives/docs/components/select

My component file is as follows:

"use client";

import { useState } from "react";
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import * as Label from "@radix-ui/react-label";
import { ChevronDown, ChevronDownIcon, ChevronUpIcon, CheckIcon, RefreshCw } from "lucide-react";
import * as Select from "@radix-ui/react-select";
import React from 'react';
import classnames from 'classnames';

export const MySelect = () => {
    
    return ( 
        <div className="flex flex-row flex-1 w-full">
            <div className="flex flex-col w-1/5 flex-wrap px-2 bg-white">
                <Label.Root className="text-[15px] leading-[35px]" htmlFor="tones">
                Tones
                </Label.Root>
                <Select.Root defaultValue="Playful">
                    <Select.Trigger
                    className="flex items-center justify-center rounded px-[15px] text-sm leading-none h-[30px] gap-[5px] bg-white text-gray-600 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-gray-600 outline-none"
                    aria-label="Tones"
                    >
                    <Select.Value />
                    <Select.Icon className="text-gray-600">
                        <ChevronDownIcon />
                    </Select.Icon>
                    </Select.Trigger>
                    <Select.Portal>
                    <Select.Content className="overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]">
                        <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
                        <ChevronUpIcon />
                        </Select.ScrollUpButton>
                        <Select.Viewport className="p-[5px]">
                        <Select.Group>
                            <Select.Label className="px-[25px] text-sm leading-[25px] text-gray-600">
                            Tones
                            </Select.Label>
                            <SelectItem value="Playful">Option 1</SelectItem>
                            <SelectItem value="Strong">Option 2</SelectItem>
                        </Select.Group>
                        </Select.Viewport>
                        <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
                        <ChevronDownIcon />
                        </Select.ScrollDownButton>
                    </Select.Content>
                    </Select.Portal>
                </Select.Root>
                
            </div>
        </div>

        
    );
    
}

const SelectItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
    return (
      <Select.Item
        className={classnames(
          'text-[13px] leading-none text-gray-600 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-gray-600 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-gray-600 data-[highlighted]:text-violet1',
          className
        )}
        {...props}
        ref={forwardedRef}
      >
        <Select.ItemText>{children}</Select.ItemText>
        <Select.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
          <CheckIcon />
        </Select.ItemIndicator>
      </Select.Item>
    );
  });

  export default MySelect;

When I run the app, the select works as per the documentation/demo. However, I'm seeing some errors in the code editor which I'm trying to get rid of:

On the React.forwardRef() method, I'm getting the following error:

Property 'children' does not exist on type '{}'.ts(2339)

I'm new to React, so it could be a very simple oversight. I saw some other threads which suggested that forwardRef is no longer supported in React 18+. What is the correct way of using the radix-ui select in React 18 applications? Any help would be appreciated.

Thanks