'Expression produces union too complex to represent' in react typescript

Question

i am trying to get a div that has svg children with the useRef() hook and i am getting an error saying 'Expression produces union to complex to represent', i have followed the answer of How to open Visual Studio Code's 'settings.json' file but that didnt work, i have set the typescript version to the workspace aswell

type StarRatingProps = {
  number?: number;
  offCol?: string;
  onCol?: string;
  el?: keyof JSX.IntrinsicElements;
  style?: CSSProperties;
}

const defaultStarStyles = {
  width: '50px',
  height: '50px',
}

export const StarRating = ({
  number: number = 5,
  offCol: offCol = 'black',
  onCol: onCol = 'yellow',
  el: Wrapper = 'div',
  style: style = defaultStarStyles,
}: StarRatingProps) => {
  const items = Array.from({ length: number });
  const [currentCol, setCurrentCol] = useState<string>(offCol);
  const parent = useRef<HTMLElement>(null);

  const starHover = (index: number) => {
    
  }

  return(
    <Wrapper ref={parent}>
      {items.map((_, index) => (
        <svg key={index} style={style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
        onMouseOver={() => starHover(index)}>
          <path fill={currentCol} d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 
          150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 
          329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 
          68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 
          225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/>
        </svg>
      ))}
    </Wrapper>
  );
}

the error is on the line <Wrapper ref={parent}>

i have changed the typescript version and followed the answer from the question linked above but it still doesnt work