Wrong Code generation for React Native with Refs

[bejto]

🐛 Bug Report

When you configure svgr with the following:

• native: true
• ref: true

then its generating the wrong prop type for the ref. The error is the follwoing:

Type 'Ref<SVGSVGElement>' is not assignable to type 'LegacyRef<Svg> | undefined'.

To Reproduce

.svgrc.js

module.exports = {
  template: require('./template.js'),
  native: true,
  typescript: true,
  ref: true,
  memo: true,
  index: true,
  expandProps: true
}

template.js

const template = (variables, { tpl }) => {
    return tpl`
      ${variables.imports};
      import { useTheme } from '@emotion/react'; 
  
      ${variables.interfaces};
  
      const ${variables.componentName} = (${variables.props}) => {
        const theme = useTheme();
        return (
            ${variables.jsx}
        );
      };
  
      const ForwardRef = forwardRef(${variables.componentName});
      const Memo = memo(ForwardRef);
      export default Memo;
    `;
  }
  
  module.exports = template;
  

Expected behavior

Should generate the right props.

Link to repl or repo (highly encouraged)

Everything needed is mentioned in the section above..

Envinfo

## System:
 - OS: macOS 14.1.1
 - CPU: (10) arm64 Apple M1 Pro
 - Memory: 767.22 MB / 32.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.16.1 - /opt/homebrew/opt/node@18/bin/node
 - Yarn: 3.6.4 - /opt/homebrew/opt/node@18/bin/yarn
 - npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
 - Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman