diff --git a/docs/hooks.md b/docs/hooks.md
index c613fd62cd..544c1e62e8 100644
--- a/docs/hooks.md
+++ b/docs/hooks.md
@@ -52,13 +52,13 @@ export default function MyComponent() {
 
 <details>
 
-In React you may need to wrap your component with `forwardRef` to provide direct access to an element (`input` for example). You can do this by using using a `prop` value as the `ref`
+In React you may need to wrap your component with `forwardRef` to pass a `ref` property to a component. You can do this by naming one of your Mitosis `prop`s `ref`
 
 _Mitosis input_
 
 ```typescript
 export default function MyInput(props) {
-  return <input ref={props.inputRef} />;
+  return <input ref={props.ref} />;
 }
 ```
 
@@ -67,8 +67,8 @@ _Mitosis output_
 ```typescript
 import { forwardRef } from 'react';
 
-export default forwardRef(function MyInput(props, inputRef) {
-  return <input ref={inputRef} />;
+export default forwardRef(function MyInput(props, ref) {
+  return <input ref={ref} />;
 });
 ```
 
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 6e9edc2831..dc3082100a 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1443,7 +1443,7 @@ exports[`Alpine.js > jsx > Javascript Test > basicForwardRef 1`] = `
 <div x-data=\\"myBasicForwardRefComponent()\\">
   <input
     class=\\"input\\"
-    x-ref=\\"inputRef\\"
+    x-ref=\\"ref\\"
     x-bind:value=\\"name\\"
     x-on:change=\\"name = $event.target.value\\"
   />
@@ -1710,6 +1710,30 @@ exports[`Alpine.js > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > dontForwardRef 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"dontForwardRefComponent()\\">
+  <input
+    class=\\"input\\"
+    x-ref=\\"inputRef\\"
+    x-bind:value=\\"name\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"dontForwardRefComponent\\", () => ({
+      name: \\"PatrickJS\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
@@ -3992,7 +4016,7 @@ exports[`Alpine.js > jsx > Typescript Test > basicForwardRef 1`] = `
 <div x-data=\\"myBasicForwardRefComponent()\\">
   <input
     class=\\"input\\"
-    x-ref=\\"inputRef\\"
+    x-ref=\\"ref\\"
     x-bind:value=\\"name\\"
     x-on:change=\\"name = $event.target.value\\"
   />
@@ -4259,6 +4283,30 @@ exports[`Alpine.js > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > dontForwardRef 1`] = `
+"<style>
+  .input {
+    color: red;
+  }
+</style>
+<div x-data=\\"dontForwardRefComponent()\\">
+  <input
+    class=\\"input\\"
+    x-ref=\\"inputRef\\"
+    x-bind:value=\\"name\\"
+    x-on:change=\\"name = $event.target.value\\"
+  />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"dontForwardRefComponent\\", () => ({
+      name: \\"PatrickJS\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "<div x-data=\\"myComponent()\\"><span x-html=\\"refToUse\\"></span></div>
 <script>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index fd37efb6b2..34e3f94697 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2627,6 +2627,44 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6458,7 +6496,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -7010,6 +7048,49 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index 9f5f301530..5649a00a8c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2681,6 +2681,45 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6591,7 +6630,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -7157,6 +7196,50 @@ export class ComponentWithTypesModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 09951bd70d..56d040249b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -4870,6 +4870,75 @@ export class ComponentWithTypes {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > dontForwardRef 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11954,7 +12023,7 @@ import { Component } from \\"@angular/core\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -11995,7 +12064,7 @@ import { CommonModule } from \\"@angular/common\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @Component({
@@ -12966,6 +13035,85 @@ export class ComponentWithTypes {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+
+@NgModule({
+  declarations: [DontForwardRefComponent],
+  imports: [CommonModule],
+  exports: [DontForwardRefComponent],
+})
+export class DontForwardRefComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > dontForwardRef 2`] = `
+"import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@Component({
+  selector: \\"dont-forward-ref-component, DontForwardRefComponent\\",
+  template: \`
+    <div>
+      <input
+        class=\\"input\\"
+        [attr.value]=\\"name\\"
+        (input)=\\"name = $event.target.value\\"
+      />
+    </div>
+  \`,
+  styles: [
+    \`
+      .input {
+        color: red;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class DontForwardRefComponent {
+  name = \\"PatrickJS\\";
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > expressionState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index e3b4231e31..e2341a4ee9 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3371,7 +3371,7 @@ exports[`Html > jsx > Javascript Test > basicForwardRef 1`] = `
     class=\\"input\\"
     data-el=\\"input-1\\"
     data-dom-state=\\"input-2\\"
-    data-ref=\\"undefined-props.inputRef\\"
+    data-ref=\\"undefined-props.ref\\"
   />
 </div>
 <style>
@@ -4114,6 +4114,68 @@ exports[`Html > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > dontForwardRef 1`] = `
+"<div>
+  <input
+    class=\\"input\\"
+    data-el=\\"input-1\\"
+    data-dom-state=\\"input-2\\"
+    data-ref=\\"undefined-props.inputRef\\"
+  />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+<script>
+  (() => {
+    const state = { name: \\"PatrickJS\\" };
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => {
+        el.value = state.name;
+
+        el.removeEventListener(\\"input\\", onInput1Input);
+        el.addEventListener(\\"input\\", onInput1Input);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'input' event on input-1
+    function onInput1Input(event) {
+      state.name = event.target.value;
+      update();
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.refToUse --></template>
@@ -9359,7 +9421,7 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = `
     class=\\"input\\"
     data-el=\\"input-1\\"
     data-dom-state=\\"input-2\\"
-    data-ref=\\"undefined-props.inputRef\\"
+    data-ref=\\"undefined-props.ref\\"
   />
 </div>
 <style>
@@ -10102,6 +10164,68 @@ exports[`Html > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > dontForwardRef 1`] = `
+"<div>
+  <input
+    class=\\"input\\"
+    data-el=\\"input-1\\"
+    data-dom-state=\\"input-2\\"
+    data-ref=\\"undefined-props.inputRef\\"
+  />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+<script>
+  (() => {
+    const state = { name: \\"PatrickJS\\" };
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='input-1']\\").forEach((el) => {
+        el.value = state.name;
+
+        el.removeEventListener(\\"input\\", onInput1Input);
+        el.addEventListener(\\"input\\", onInput1Input);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Event handler for 'input' event on input-1
+    function onInput1Input(event) {
+      state.name = event.target.value;
+      update();
+    }
+
+    // Update with initial state on first load
+    update();
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > expressionState 1`] = `
 "<div>
   <template data-el=\\"div-1\\"><!-- state.refToUse --></template>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 11c3f8fbd1..ab51187856 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -584,6 +584,18 @@ exports[`Liquid > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > dontForwardRef 1`] = `
+"<div>
+  <input class=\\"input\\" value=\\"{{name}}\\" />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 "<div>{{refToUse}}</div>
 "
@@ -1446,6 +1458,18 @@ exports[`Liquid > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > dontForwardRef 1`] = `
+"<div>
+  <input class=\\"input\\" value=\\"{{name}}\\" />
+</div>
+<style>
+  .input {
+    color: red;
+  }
+</style>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > expressionState 1`] = `
 "<div>{{refToUse}}</div>
 "
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index b804ebb707..2943ab59b7 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -2111,10 +2111,10 @@ export default class MyBasicForwardRefComponent extends LitElement {
     return this;
   }
 
-  @query('[ref=\\"props.inputRef\\"]')
-  propsInputRef!: HTMLElement;
+  @query('[ref=\\"props.ref\\"]')
+  propsRef!: HTMLElement;
 
-  @property() inputRef: any;
+  @property() ref: any;
 
   @state() name = \\"PatrickJS\\";
 
@@ -2125,7 +2125,7 @@ export default class MyBasicForwardRefComponent extends LitElement {
 }
 </style>
           <div>
-          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+          <input ref=\\"props.ref\\" .value=\${this.name} @input=\${(event) =>
       (this.name = event.target.value)} />
         </div>
 
@@ -2572,6 +2572,40 @@ export default class ComponentWithTypes extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"dont-forward-ref-component\\")
+export default class DontForwardRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"props.inputRef\\"]')
+  propsInputRef!: HTMLElement;
+
+  @property() inputRef: any;
+
+  @state() name = \\"PatrickJS\\";
+
+  render() {
+    return html\`
+          <style>.input {
+  color: red;
+}
+</style>
+          <div>
+          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+      (this.name = event.target.value)} />
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > expressionState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -6330,7 +6364,7 @@ import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 @customElement(\\"my-basic-forward-ref-component\\")
@@ -6339,10 +6373,10 @@ export default class MyBasicForwardRefComponent extends LitElement {
     return this;
   }
 
-  @query('[ref=\\"props.inputRef\\"]')
-  propsInputRef!: HTMLElement;
+  @query('[ref=\\"props.ref\\"]')
+  propsRef!: HTMLElement;
 
-  @property() inputRef: any;
+  @property() ref: any;
 
   @state() name = \\"PatrickJS\\";
 
@@ -6353,7 +6387,7 @@ export default class MyBasicForwardRefComponent extends LitElement {
 }
 </style>
           <div>
-          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+          <input ref=\\"props.ref\\" .value=\${this.name} @input=\${(event) =>
       (this.name = event.target.value)} />
         </div>
 
@@ -6842,6 +6876,45 @@ export default class ComponentWithTypes extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+@customElement(\\"dont-forward-ref-component\\")
+export default class DontForwardRefComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @query('[ref=\\"props.inputRef\\"]')
+  propsInputRef!: HTMLElement;
+
+  @property() inputRef: any;
+
+  @state() name = \\"PatrickJS\\";
+
+  render() {
+    return html\`
+          <style>.input {
+  color: red;
+}
+</style>
+          <div>
+          <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+      (this.name = event.target.value)} />
+        </div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > expressionState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index c6efae5241..d98d94bc15 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1379,20 +1379,20 @@ exports[`Marko > jsx > Javascript Test > basicForwardRef 1`] = `
     this.state = { name: \\"PatrickJS\\" };
   }
 
-  get propsInputRef() {
-    return this.getEl(\\"propsInputRef\\");
+  get propsRef() {
+    return this.getEl(\\"propsRef\\");
   }
 }
 
 style { 
-  .input-7c942903 {
+  .input-55669c1e {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-7c942903\\"
-    key=\\"propsInputRef\\"
+    class=\\"input-55669c1e\\"
+    key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
   />
@@ -1613,6 +1613,32 @@ class {}
 <div>Hello \${input.name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > dontForwardRef 1`] = `
+"class {
+  onCreate(input) {
+    this.state = { name: \\"PatrickJS\\" };
+  }
+
+  get propsInputRef() {
+    return this.getEl(\\"propsInputRef\\");
+  }
+}
+
+style { 
+  .input-5ca2af3c {
+    color: red;
+  }
+}
+<div>
+  <input
+    class=\\"input-5ca2af3c\\"
+    key=\\"propsInputRef\\"
+    value=(state.name)
+    on-input(event => state.name = event.target.value)
+  />
+</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 "class {
   onCreate(input) {
@@ -3661,20 +3687,20 @@ exports[`Marko > jsx > Typescript Test > basicForwardRef 1`] = `
     this.state = { name: \\"PatrickJS\\" };
   }
 
-  get propsInputRef() {
-    return this.getEl(\\"propsInputRef\\");
+  get propsRef() {
+    return this.getEl(\\"propsRef\\");
   }
 }
 
 style { 
-  .input-014e706f {
+  .input-421e0008 {
     color: red;
   }
 }
 <div>
   <input
-    class=\\"input-014e706f\\"
-    key=\\"propsInputRef\\"
+    class=\\"input-421e0008\\"
+    key=\\"propsRef\\"
     value=(state.name)
     on-input(event => state.name = event.target.value)
   />
@@ -3897,6 +3923,32 @@ class {}
 <div>Hello \${input.name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > dontForwardRef 1`] = `
+"class {
+  onCreate(input) {
+    this.state = { name: \\"PatrickJS\\" };
+  }
+
+  get propsInputRef() {
+    return this.getEl(\\"propsInputRef\\");
+  }
+}
+
+style { 
+  .input-30866138 {
+    color: red;
+  }
+}
+<div>
+  <input
+    class=\\"input-30866138\\"
+    key=\\"propsInputRef\\"
+    value=(state.name)
+    on-input(event => state.name = event.target.value)
+  />
+</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > expressionState 1`] = `
 "class {
   onCreate(input) {
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 3fbc2dadea..2c05f4bca3 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6560,7 +6560,7 @@ exports[`Parse JSX > Javascript > basicForwardRef 1`] = `
               "type": "single",
             },
             "ref": {
-              "code": "props.inputRef",
+              "code": "props.ref",
               "type": "single",
             },
             "value": {
@@ -8149,6 +8149,97 @@ exports[`Parse JSX > Javascript > defaultValsWithTypes 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > dontForwardRef 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "css": {
+              "code": "{
+  color: 'red'
+}",
+              "type": "single",
+            },
+            "onChange": {
+              "arguments": [
+                "event",
+              ],
+              "code": "state.name = event.target.value",
+              "type": "single",
+            },
+            "ref": {
+              "code": "props.inputRef",
+              "type": "single",
+            },
+            "value": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "input",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+    ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "DontForwardRefComponent",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "'PatrickJS'",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > expressionState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -18608,7 +18699,7 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
               "type": "single",
             },
             "ref": {
-              "code": "props.inputRef",
+              "code": "props.ref",
               "type": "single",
             },
             "value": {
@@ -18663,7 +18754,7 @@ exports[`Parse JSX > Typescript > basicForwardRef 1`] = `
   "types": [
     "export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }",
   ],
 }
@@ -20266,6 +20357,104 @@ exports[`Parse JSX > Typescript > defaultValsWithTypes 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > dontForwardRef 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "css": {
+              "code": "{
+  color: 'red'
+}",
+              "type": "single",
+            },
+            "onChange": {
+              "arguments": [
+                "event",
+              ],
+              "code": "state.name = event.target.value",
+              "type": "single",
+            },
+            "ref": {
+              "code": "props.inputRef",
+              "type": "single",
+            },
+            "value": {
+              "code": "state.name",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "input",
+          "properties": {},
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+    ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [],
+  "inputs": [],
+  "meta": {},
+  "name": "DontForwardRefComponent",
+  "propsTypeRef": "Props",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "'PatrickJS'",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+  "types": [
+    "export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}",
+  ],
+}
+`;
+
 exports[`Parse JSX > Typescript > expressionState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index cc1dc8fe4b..60a411e2a6 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1654,7 +1654,7 @@ function MyBasicForwardRefComponent(props) {
       <div>
         <input
           className=\\"input\\"
-          ref={props.inputRef}
+          ref={props.ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -2071,6 +2071,37 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > dontForwardRef 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > expressionState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -5061,7 +5092,7 @@ import { useState } from \\"preact/hooks\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 function MyBasicForwardRefComponent(props: Props) {
@@ -5072,7 +5103,7 @@ function MyBasicForwardRefComponent(props: Props) {
       <div>
         <input
           className=\\"input\\"
-          ref={props.inputRef}
+          ref={props.ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -5532,6 +5563,42 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > dontForwardRef 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <Fragment>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </Fragment>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > expressionState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index e48d0ac891..41f1696441 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -3463,7 +3463,7 @@ export const MyBasicForwardRefComponent = component$((props) => {
     <div>
       <input
         class=\\"input-MyBasicForwardRefComponent\\"
-        ref={props.inputRef}
+        ref={props.ref}
         value={state.name}
         onChange$={(event) => (state.name = event.target.value)}
       />
@@ -3748,6 +3748,42 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > dontForwardRef 1`] = `
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
+
+export const DontForwardRefComponent = component$((props) => {
+  useStylesScoped$(STYLES);
+
+  const state = useStore({ name: \\"PatrickJS\\" });
+
+  return (
+    <div>
+      <input
+        class=\\"input-DontForwardRefComponent\\"
+        ref={props.inputRef}
+        value={state.name}
+        onChange$={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+});
+
+export default DontForwardRefComponent;
+
+export const STYLES = \`
+.input-DontForwardRefComponent {
+  color: red;
+}
+\`;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > expressionState 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
@@ -6689,7 +6725,7 @@ exports[`qwik > jsx > Typescript Test > basicForwardRef 1`] = `
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 export const MyBasicForwardRefComponent = component$((props: Props) => {
   useStylesScoped$(STYLES);
@@ -6700,7 +6736,7 @@ export const MyBasicForwardRefComponent = component$((props: Props) => {
     <div>
       <input
         class=\\"input-MyBasicForwardRefComponent\\"
-        ref={props.inputRef}
+        ref={props.ref}
         value={state.name}
         onChange$={(event) => (state.name = event.target.value)}
       />
@@ -7014,6 +7050,46 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > dontForwardRef 1`] = `
+"import {
+  Fragment,
+  component$,
+  h,
+  useStore,
+  useStylesScoped$,
+} from \\"@builder.io/qwik\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+export const DontForwardRefComponent = component$((props: Props) => {
+  useStylesScoped$(STYLES);
+
+  const state = useStore<any>({ name: \\"PatrickJS\\" });
+
+  return (
+    <div>
+      <input
+        class=\\"input-DontForwardRefComponent\\"
+        ref={props.inputRef}
+        value={state.name}
+        onChange$={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+});
+
+export default DontForwardRefComponent;
+
+export const STYLES = \`
+.input-DontForwardRefComponent {
+  color: red;
+}
+\`;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > expressionState 1`] = `
 "import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 1927ce89be..5f222167c3 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1856,13 +1856,13 @@ import {
 import { useState, forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
       <View>
         <View
-          ref={inputRef}
+          ref={ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
           style={styles.view1}
@@ -2354,6 +2354,39 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <View>
+      <View
+        ref={props.inputRef}
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        style={styles.view1}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { color: \\"red\\" } });
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5801,17 +5834,17 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
       <View>
         <View
-          ref={inputRef}
+          ref={ref}
           value={name}
           onChange={(event) => setName(event.target.value)}
           style={styles.view1}
@@ -6346,6 +6379,44 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <View>
+      <View
+        ref={props.inputRef}
+        value={name}
+        onChange={(event) => setName(event.target.value)}
+        style={styles.view1}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({ view1: { color: \\"red\\" } });
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index ca22df913f..2091203cc3 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1608,7 +1608,7 @@ exports[`React > jsx > Javascript Test > basicForwardRef 1`] = `
 import { useState, forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -1616,7 +1616,7 @@ const MyBasicForwardRefComponent = forwardRef(
         <div>
           <input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -2023,6 +2023,36 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -4929,11 +4959,11 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -4941,7 +4971,7 @@ const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
         <div>
           <input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -5391,6 +5421,41 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`React > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <div>
+        <input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`React > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 2538a280fd..3f56046212 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -1510,6 +1510,7 @@ export default MyBasicForwardRefComponent;
 
 exports[`RSC > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 "import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
 
 const MyBasicForwardRefComponent = forwardRef(
   function MyBasicForwardRefComponent(props, inputRef) {
@@ -1859,6 +1860,30 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+
+function DontForwardRefComponent(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"PatrickJS\\" };
+
+  return (
+    <>
+      <div>
+        <input className=\\"input-0f920d02\\" value={state.name} />
+      </div>
+      <style>{\`.input-0f920d02 {
+  color: red;
+}\`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 
@@ -4634,7 +4659,7 @@ exports[`RSC > jsx > Typescript Test > basicForwardRef 1`] = `
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 function MyBasicForwardRefComponent(props: Props) {
@@ -4645,9 +4670,9 @@ function MyBasicForwardRefComponent(props: Props) {
   return (
     <>
       <div>
-        <input className=\\"input-346a570f\\" value={state.name} />
+        <input className=\\"input-50884ee0\\" value={state.name} />
       </div>
-      <style>{\`.input-346a570f {
+      <style>{\`.input-50884ee0 {
   color: red;
 }\`}</style>
     </>
@@ -4660,13 +4685,14 @@ export default MyBasicForwardRefComponent;
 
 exports[`RSC > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
 "import * as React from \\"react\\";
+import { forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
   inputRef: HTMLInputElement;
 }
 
-const MyBasicForwardRefComponent = forwardRef(
+const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
   function MyBasicForwardRefComponent(props: Props, inputRef) {
     const _context = { ...props[\\"_context\\"] };
 
@@ -5052,6 +5078,35 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+function DontForwardRefComponent(props: Props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"PatrickJS\\" };
+
+  return (
+    <>
+      <div>
+        <input className=\\"input-0d4c0c8e\\" value={state.name} />
+      </div>
+      <style>{\`.input-0d4c0c8e {
+  color: red;
+}\`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 67ebba0f7c..23a02c4834 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -1765,7 +1765,7 @@ exports[`Stencil > jsx > Javascript Test > basicForwardRef 1`] = `
 \`,
 })
 export default class MyBasicForwardRefComponent {
-  @Prop() inputRef: any;
+  @Prop() ref: any;
 
   @State() name = \\"PatrickJS\\";
 
@@ -1774,7 +1774,7 @@ export default class MyBasicForwardRefComponent {
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.props.inputRef = el)}
+          ref={(el) => (this.props.ref = el)}
           value={this.name}
           onInput={(event) => (this.name = event.target.value)}
         />
@@ -2160,6 +2160,38 @@ export default class ComponentWithTypes {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > dontForwardRef 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"dont-forward-ref-component\\",
+  styles: \`
+        .input {
+          color: red;
+        }
+\`,
+})
+export default class DontForwardRefComponent {
+  @Prop() inputRef: any;
+
+  @State() name = \\"PatrickJS\\";
+
+  render() {
+    return (
+      <div>
+        <input
+          class=\\"input\\"
+          ref={(el) => (this.props.inputRef = el)}
+          value={this.name}
+          onInput={(event) => (this.name = event.target.value)}
+        />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > expressionState 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -4674,7 +4706,7 @@ exports[`Stencil > jsx > Typescript Test > basicForwardRef 1`] = `
 \`,
 })
 export default class MyBasicForwardRefComponent {
-  @Prop() inputRef: any;
+  @Prop() ref: any;
 
   @State() name = \\"PatrickJS\\";
 
@@ -4683,7 +4715,7 @@ export default class MyBasicForwardRefComponent {
       <div>
         <input
           class=\\"input\\"
-          ref={(el) => (this.props.inputRef = el)}
+          ref={(el) => (this.props.ref = el)}
           value={this.name}
           onInput={(event) => (this.name = event.target.value)}
         />
@@ -5071,6 +5103,38 @@ export default class ComponentWithTypes {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > dontForwardRef 1`] = `
+"import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"dont-forward-ref-component\\",
+  styles: \`
+        .input {
+          color: red;
+        }
+\`,
+})
+export default class DontForwardRefComponent {
+  @Prop() inputRef: any;
+
+  @State() name = \\"PatrickJS\\";
+
+  render() {
+    return (
+      <div>
+        <input
+          class=\\"input\\"
+          ref={(el) => (this.props.inputRef = el)}
+          value={this.name}
+          onInput={(event) => (this.name = event.target.value)}
+        />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > expressionState 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 96562ee88d..6d9a1826fd 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1486,13 +1486,13 @@ exports[`Svelte > jsx > Javascript Test > basicForNoTagReference 1`] = `
 
 exports[`Svelte > jsx > Javascript Test > basicForwardRef 1`] = `
 "<script>
-  export let inputRef;
+  export let ref;
 
   let name = \\"PatrickJS\\";
 </script>
 
 <div>
-  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+  <input class=\\"input\\" bind:this={ref} bind:value={name} />
 </div>
 
 <style>
@@ -1774,6 +1774,24 @@ exports[`Svelte > jsx > Javascript Test > defaultValsWithTypes 1`] = `
 <div>Hello {name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > dontForwardRef 1`] = `
+"<script>
+  export let inputRef;
+
+  let name = \\"PatrickJS\\";
+</script>
+
+<div>
+  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+</div>
+
+<style>
+  .input {
+    color: red;
+  }
+</style>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > expressionState 1`] = `
 "<script>
   export let componentRef;
@@ -4375,18 +4393,18 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRef 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface Props {
     showInput: boolean;
-    inputRef: HTMLInputElement;
+    ref: HTMLInputElement;
   }
 </script>
 
 <script lang=\\"ts\\">
-  export let inputRef: Props[\\"inputRef\\"];
+  export let ref: Props[\\"ref\\"];
 
   let name = \\"PatrickJS\\";
 </script>
 
 <div>
-  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+  <input class=\\"input\\" bind:this={ref} bind:value={name} />
 </div>
 
 <style>
@@ -4733,6 +4751,31 @@ exports[`Svelte > jsx > Typescript Test > defaultValsWithTypes 1`] = `
 <div>Hello {name || DEFAULT_VALUES.name}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > dontForwardRef 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  export interface Props {
+    showInput: boolean;
+    inputRef: HTMLInputElement;
+  }
+</script>
+
+<script lang=\\"ts\\">
+  export let inputRef: Props[\\"inputRef\\"];
+
+  let name = \\"PatrickJS\\";
+</script>
+
+<div>
+  <input class=\\"input\\" bind:this={inputRef} bind:value={name} />
+</div>
+
+<style>
+  .input {
+    color: red;
+  }
+</style>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > expressionState 1`] = `
 "<script lang=\\"ts\\">
   export let componentRef;
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 3040186d37..ebcc3fcd72 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -1615,7 +1615,7 @@ import { useState, forwardRef } from \\"react\\";
 import { View, Input } from \\"@tarojs/components\\";
 
 const MyBasicForwardRefComponent = forwardRef(
-  function MyBasicForwardRefComponent(props, inputRef) {
+  function MyBasicForwardRefComponent(props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -1623,7 +1623,7 @@ const MyBasicForwardRefComponent = forwardRef(
         <View>
           <Input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -2042,6 +2042,37 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import { View, Input } from \\"@tarojs/components\\";
+
+function DontForwardRefComponent(props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <View>
+        <Input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </View>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
@@ -5009,13 +5040,13 @@ import { useState, forwardRef } from \\"react\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 import { View, Input } from \\"@tarojs/components\\";
 
-const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
-  function MyBasicForwardRefComponent(props: Props, inputRef) {
+const MyBasicForwardRefComponent = forwardRef<Props[\\"ref\\"]>(
+  function MyBasicForwardRefComponent(props: Props, ref) {
     const [name, setName] = useState(() => \\"PatrickJS\\");
 
     return (
@@ -5023,7 +5054,7 @@ const MyBasicForwardRefComponent = forwardRef<Props[\\"inputRef\\"]>(
         <View>
           <Input
             className=\\"input\\"
-            ref={inputRef}
+            ref={ref}
             value={name}
             onChange={(event) => setName(event.target.value)}
           />
@@ -5488,6 +5519,43 @@ export default ComponentWithTypes;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > dontForwardRef 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+import { View, Input } from \\"@tarojs/components\\";
+
+function DontForwardRefComponent(props: Props) {
+  const [name, setName] = useState(() => \\"PatrickJS\\");
+
+  return (
+    <>
+      <View>
+        <Input
+          className=\\"input\\"
+          ref={props.inputRef}
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </View>
+      <style jsx>{\`
+        .input {
+          color: red;
+        }
+      \`}</style>
+    </>
+  );
+}
+
+export default DontForwardRefComponent;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > expressionState 1`] = `
 "import * as React from \\"react\\";
 import { useState } from \\"react\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 79abcd2800..b67beced2f 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1611,7 +1611,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -1621,7 +1621,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
 <script setup>
 import { ref } from \\"vue\\";
 
-const props = defineProps([\\"inputRef\\"]);
+const props = defineProps([\\"ref\\"]);
 const name = ref(\\"PatrickJS\\");
 </script>
 
@@ -1949,6 +1949,32 @@ const props = defineProps([\\"name\\"]);
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+const props = defineProps([\\"inputRef\\"]);
+const name = ref(\\"PatrickJS\\");
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Javascript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
@@ -4639,7 +4665,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -4651,7 +4677,7 @@ import { ref } from \\"vue\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 const props = defineProps<Props>();
@@ -5024,6 +5050,37 @@ const props = defineProps<Props>();
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+const props = defineProps<Props>();
+const name = ref(\\"PatrickJS\\");
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Typescript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 2398040e8c..06b4d17388 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1878,7 +1878,7 @@ exports[`Vue > jsx > Javascript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -1891,7 +1891,7 @@ import { defineComponent } from \\"vue\\";
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
 
-  props: [\\"inputRef\\"],
+  props: [\\"ref\\"],
 
   data() {
     return { name: \\"PatrickJS\\" };
@@ -2336,6 +2336,39 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"dont-forward-ref-component\\",
+
+  props: [\\"inputRef\\"],
+
+  data() {
+    return { name: \\"PatrickJS\\" };
+  },
+});
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Javascript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
@@ -5612,7 +5645,7 @@ exports[`Vue > jsx > Typescript Test > basicForwardRef 1`] = `
   <div>
     <input
       class=\\"input\\"
-      ref=\\"inputRef\\"
+      ref=\\"ref\\"
       :value=\\"name\\"
       @input=\\"name = $event.target.value\\"
     />
@@ -5624,13 +5657,13 @@ import { defineComponent } from \\"vue\\";
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 export default defineComponent({
   name: \\"my-basic-forward-ref-component\\",
 
-  props: [\\"inputRef\\"],
+  props: [\\"ref\\"],
 
   data() {
     return { name: \\"PatrickJS\\" };
@@ -6117,6 +6150,44 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > dontForwardRef 1`] = `
+"<template>
+  <div>
+    <input
+      class=\\"input\\"
+      ref=\\"inputRef\\"
+      :value=\\"name\\"
+      @input=\\"name = $event.target.value\\"
+    />
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+export default defineComponent({
+  name: \\"dont-forward-ref-component\\",
+
+  props: [\\"inputRef\\"],
+
+  data() {
+    return { name: \\"PatrickJS\\" };
+  },
+});
+</script>
+
+<style scoped>
+.input {
+  color: red;
+}
+</style>"
+`;
+
 exports[`Vue > jsx > Typescript Test > expressionState 1`] = `
 "<template>
   <div>{{ refToUse }}</div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 087f90e59a..a4d7a82dfa 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -8648,6 +8648,159 @@ customElements.define(\\"component-with-types\\", ComponentWithTypes);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > dontForwardRef 1`] = `
+"/**
+ * Usage:
+ *
+ *  <dont-forward-ref-component></dont-forward-ref-component>
+ *
+ */
+class DontForwardRefComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"PatrickJS\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    // Event handler for 'input' event on input-dont-forward-ref-component-1
+    this.onInputDontForwardRefComponent1Input = (event) => {
+      this.state.name = event.target.value;
+      this.update();
+    };
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <input
+          class=\\"input\\"
+          data-el=\\"input-dont-forward-ref-component-1\\"
+          data-dom-state=\\"DontForwardRefComponent-input-dont-forward-ref-component-1\\"
+        />
+      </div>
+      <style>
+        .input {
+          color: red;
+        }
+      </style>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='input-dont-forward-ref-component-1']\\")
+      .forEach((el) => {
+        el.value = this.state.name;
+        el.removeEventListener(
+          \\"input\\",
+          this.onInputDontForwardRefComponent1Input
+        );
+        el.addEventListener(\\"input\\", this.onInputDontForwardRefComponent1Input);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"dont-forward-ref-component\\", DontForwardRefComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > expressionState 1`] = `
 "/**
  * Usage:
@@ -19690,7 +19843,7 @@ customElements.define(
 exports[`webcomponent > jsx > Typescript Test > basicForwardRef 1`] = `
 "export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 /**
@@ -21515,6 +21668,164 @@ customElements.define(\\"component-with-types\\", ComponentWithTypes);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > dontForwardRef 1`] = `
+"export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+/**
+ * Usage:
+ *
+ *  <dont-forward-ref-component></dont-forward-ref-component>
+ *
+ */
+class DontForwardRefComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"PatrickJS\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    // Event handler for 'input' event on input-dont-forward-ref-component-1
+    this.onInputDontForwardRefComponent1Input = (event) => {
+      this.state.name = event.target.value;
+      this.update();
+    };
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <input
+          class=\\"input\\"
+          data-el=\\"input-dont-forward-ref-component-1\\"
+          data-dom-state=\\"DontForwardRefComponent-input-dont-forward-ref-component-1\\"
+        />
+      </div>
+      <style>
+        .input {
+          color: red;
+        }
+      </style>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // grab previous input state
+    const preStateful = this.getStateful(this._root);
+    const preValues = this.prepareHydrate(preStateful);
+
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+
+    // hydrate input state
+    if (preValues.length) {
+      const nextStateful = this.getStateful(this._root);
+      this.hydrateDom(preValues, nextStateful);
+    }
+  }
+
+  getStateful(el) {
+    const stateful = el.querySelectorAll(\\"[data-dom-state]\\");
+    return stateful ? Array.from(stateful) : [];
+  }
+  prepareHydrate(stateful) {
+    return stateful.map((el) => {
+      return {
+        id: el.dataset.domState,
+        value: el.value,
+        active: document.activeElement === el,
+        selectionStart: el.selectionStart,
+      };
+    });
+  }
+  hydrateDom(preValues, stateful) {
+    return stateful.map((el, index) => {
+      const prev = preValues.find((prev) => el.dataset.domState === prev.id);
+      if (prev) {
+        el.value = prev.value;
+        if (prev.active) {
+          el.focus();
+          el.selectionStart = prev.selectionStart;
+        }
+      }
+    });
+  }
+
+  updateBindings() {
+    this._root
+      .querySelectorAll(\\"[data-el='input-dont-forward-ref-component-1']\\")
+      .forEach((el) => {
+        el.value = this.state.name;
+        el.removeEventListener(
+          \\"input\\",
+          this.onInputDontForwardRefComponent1Input
+        );
+        el.addEventListener(\\"input\\", this.onInputDontForwardRefComponent1Input);
+      });
+  }
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"dont-forward-ref-component\\", DontForwardRefComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > expressionState 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx b/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
index 9b8db10fb6..3fa2431272 100644
--- a/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
+++ b/packages/core/src/__tests__/data/basic-forwardRef.raw.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@builder.io/mitosis';
 
 export interface Props {
   showInput: boolean;
-  inputRef: HTMLInputElement;
+  ref: HTMLInputElement;
 }
 
 export default function MyBasicForwardRefComponent(props: Props) {
@@ -13,7 +13,7 @@ export default function MyBasicForwardRefComponent(props: Props) {
   return (
     <div>
       <input
-        ref={props.inputRef}
+        ref={props.ref}
         css={{
           color: 'red',
         }}
diff --git a/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx b/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx
new file mode 100644
index 0000000000..aac095143f
--- /dev/null
+++ b/packages/core/src/__tests__/data/dont-forwardRef.raw.tsx
@@ -0,0 +1,25 @@
+import { useStore } from '@builder.io/mitosis';
+
+export interface Props {
+  showInput: boolean;
+  inputRef: HTMLInputElement;
+}
+
+export default function DontForwardRefComponent(props: Props) {
+  const state = useStore({
+    name: 'PatrickJS',
+  });
+
+  return (
+    <div>
+      <input
+        ref={props.inputRef}
+        css={{
+          color: 'red',
+        }}
+        value={state.name}
+        onChange={(event) => (state.name = event.target.value)}
+      />
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index b8b0519c6f..326df6c3f0 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -30,6 +30,7 @@ const basicFor = getRawFile('./data/basic-for.raw.tsx');
 const basicForNoTagReference = getRawFile('./data/basic-for-no-tag-reference.raw');
 const basicRef = getRawFile('./data/basic-ref.raw.tsx');
 const basicForwardRef = getRawFile('./data/basic-forwardRef.raw.tsx');
+const dontForwardRef = getRawFile('./data/dont-forwardRef.raw.tsx');
 const basicForwardRefMetadata = getRawFile('./data/basic-forwardRef-metadata.raw.tsx');
 const basicRefPrevious = getRawFile('./data/basic-ref-usePrevious.raw.tsx');
 const basicRefAssignment = getRawFile('./data/basic-ref-assignment.raw.tsx');
@@ -230,6 +231,7 @@ const FOR_SHOW_TESTS: Tests = {
 const FORWARD_REF_TESTS: Tests = {
   basicForwardRef,
   basicForwardRefMetadata,
+  dontForwardRef,
 };
 
 const SHOW_TESTS: Tests = {
diff --git a/packages/core/src/generators/angular.ts b/packages/core/src/generators/angular.ts
index 1b5ca49543..6886f07351 100644
--- a/packages/core/src/generators/angular.ts
+++ b/packages/core/src/generators/angular.ts
@@ -357,7 +357,7 @@ export const componentToAngular: TranspilerGenerator<ToAngularOptions> =
     });
     const hasConstructor = Boolean(injectables.length || json.hooks?.onInit);
 
-    const props = getProps(json);
+    const props = getProps(json, 'angular');
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/html.ts b/packages/core/src/generators/html.ts
index 259db92c81..ebbe090bcb 100644
--- a/packages/core/src/generators/html.ts
+++ b/packages/core/src/generators/html.ts
@@ -891,7 +891,7 @@ export const componentToCustomElement: TranspilerGenerator<ToHtmlOptions> =
     const childComponents = getChildComponents(json, useOptions);
     const componentHasProps = hasProps(json);
     const componentHasStatefulDom = hasStatefulDom(json);
-    const props = getProps(json);
+    const props = getProps(json, 'html');
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
       props.delete(forwardProp);
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 72e2a216fb..4ce9dfa06b 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -133,7 +133,7 @@ export const componentToLit: TranspilerGenerator<ToLitOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component);
+    const props = getProps(component, 'lit');
     let css = collectCss(json);
 
     const domRefs = getRefs(json);
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index e8f47d07d1..a41e068f6c 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -129,7 +129,7 @@ const BINDING_MAPPERS: {
     if (regexp.test(value)) {
       const match = regexp.exec(value);
       const prop = match?.[2];
-      if (prop) {
+      if (prop && options?.forwardRef === prop) {
         return [ref, prop];
       }
     }
diff --git a/packages/core/src/generators/react/generator.ts b/packages/core/src/generators/react/generator.ts
index 872e2af12d..74e2ea574f 100644
--- a/packages/core/src/generators/react/generator.ts
+++ b/packages/core/src/generators/react/generator.ts
@@ -5,7 +5,6 @@ import { createSingleBinding } from '../../helpers/bindings';
 import { createMitosisNode } from '../../helpers/create-mitosis-node';
 import { dedent } from '../../helpers/dedent';
 import { fastClone } from '../../helpers/fast-clone';
-import { getPropsRef } from '../../helpers/get-props-ref';
 import { getRefs } from '../../helpers/get-refs';
 import {
   getStateObjectStringFromComponent,
@@ -36,6 +35,7 @@ import { hasContext } from '../helpers/context';
 import { collectReactNativeStyles } from '../react-native';
 import { blockToReact } from './blocks';
 import { closeFrag, getCode, openFrag, processTagReferences, wrapInFragment } from './helpers';
+import { getReactPropsRef } from './refs';
 import { getUseStateCode, processHookCode, updateStateSetters } from './state';
 import { ToReactOptions } from './types';
 
@@ -258,15 +258,15 @@ const _componentToReact = (
 
   let hasState = checkHasState(json);
 
-  const [forwardRef, hasPropRef] = getPropsRef(json);
+  const [forwardRef, hasPropRef] = getReactPropsRef(json);
   const isForwardRef = !options.preact && Boolean(json.meta.useMetadata?.forwardRef || hasPropRef);
   if (isForwardRef) {
     const meta = json.meta.useMetadata?.forwardRef as string;
     options.forwardRef = meta || forwardRef;
   }
   const forwardRefType =
-    options.typescript && json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
-      ? `<${json.propsTypeRef}["${forwardRef}"]>`
+    options.typescript && json.propsTypeRef && options.forwardRef && json.propsTypeRef !== 'any'
+      ? `<${json.propsTypeRef}["${options.forwardRef}"]>`
       : '';
 
   if (options.stateType === 'builder') {
@@ -308,7 +308,7 @@ const _componentToReact = (
   if (allRefs.length) {
     reactLibImports.add('useRef');
   }
-  if (!options.preact && hasPropRef) {
+  if (!options.preact && options.forwardRef) {
     reactLibImports.add('forwardRef');
   }
   if (
diff --git a/packages/core/src/generators/react/refs.ts b/packages/core/src/generators/react/refs.ts
new file mode 100644
index 0000000000..ae37a58207
--- /dev/null
+++ b/packages/core/src/generators/react/refs.ts
@@ -0,0 +1,30 @@
+import traverse from 'traverse';
+import { isMitosisNode } from '../../helpers/is-mitosis-node';
+import { MitosisComponent } from '../../types/mitosis-component';
+
+export function getReactPropsRef(
+  json: MitosisComponent,
+  shouldRemove?: boolean,
+): [string, boolean] {
+  let has = false;
+  let prop = '';
+  traverse(json).forEach(function (item) {
+    if (isMitosisNode(item)) {
+      const binding = item.bindings.ref;
+      const regexp = /(.+)?props\.(ref)( |\)|;|\()?$/;
+      if (binding && regexp.test(binding.code)) {
+        const match = regexp.exec(binding.code);
+        const _prop = match?.[2];
+        if (_prop) {
+          prop = _prop;
+        }
+        if (shouldRemove) {
+          delete item.bindings.ref;
+        }
+        has = true;
+        this.stop();
+      }
+    }
+  });
+  return [prop, has];
+}
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 8e8d5e47da..c5f91d7979 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -103,7 +103,7 @@ export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
-    const props = getProps(component);
+    const props = getProps(component, 'stencil');
     let css = collectCss(json);
 
     mapRefs(component, (refName) => `this.${refName}`);
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index c8bceec2d0..da813edc45 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -154,7 +154,7 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
 
     gettersToFunctions(json);
 
-    const props = Array.from(getProps(json)).filter((prop) => !isSlotProperty(prop));
+    const props = Array.from(getProps(json, 'svelte')).filter((prop) => !isSlotProperty(prop));
 
     const refs = Array.from(getRefs(json))
       .map(stripStateAndProps({ json, options }))
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index 133599aba8..8dc02370a1 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -166,7 +166,7 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     }
 
     // need to run this before we process the component's code
-    const props = Array.from(getProps(component));
+    const props = Array.from(getProps(component, 'vue'));
     const elementProps = props.filter((prop) => !isSlotProperty(prop));
     const slotsProps = props.filter((prop) => isSlotProperty(prop));
 
diff --git a/packages/core/src/helpers/get-props.ts b/packages/core/src/helpers/get-props.ts
index 60e009b69e..bbb1ce9101 100644
--- a/packages/core/src/helpers/get-props.ts
+++ b/packages/core/src/helpers/get-props.ts
@@ -1,4 +1,5 @@
 import traverse from 'traverse';
+import { Target } from '../types/config';
 import { MitosisComponent } from '../types/mitosis-component';
 
 const propsRegex = /props\s*\.\s*([a-zA-Z0-9_\$]+)/;
@@ -6,27 +7,33 @@ const allPropsMatchesRegex = new RegExp(propsRegex, 'g');
 
 // copied from https://github.com/vuejs/core/blob/fa6556a0d56eeff1fec4f948460351ccf8f99f35/packages/compiler-core/src/validateExpression.ts
 // typeof, instanceof and in are allowed
-const prohibitedKeywordRE = new RegExp(
-  '\\b' +
-    (
-      'do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
-      'super,throw,while,yield,delete,export,import,return,switch,default,' +
-      'extends,finally,continue,debugger,function,arguments,typeof,void,' +
-      // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
-      // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
-      'key,ref,slot,slot-scope,is,' +
-      // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
-      'style'
-    )
-      .split(',')
-      .join('\\b|\\b') +
-    '\\b',
-);
+const getProhibitedKeywordRE = (target: Target) =>
+  new RegExp(
+    '\\b' +
+      ('do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
+        'super,throw,while,yield,delete,export,import,return,switch,default,' +
+        'extends,finally,continue,debugger,function,arguments,typeof,void,' +
+        // both below conditions added based on https://github.com/vuejs/vue/blob/e80cd09fff570df57d608f8f5aaccee6d7f31917/src/core/instance/state.ts#L89-L96
+        // below line added from https://github.com/vuejs/vue/blob/8880b55d52f8d873f79ef67436217c8752cddef5/src/shared/util.ts#L130
+        'key,slot,slot-scope,is,' +
+        // React handles `ref` as a `forwardRef` properly, but should be included in Vue from the same list as the above line
+        target ===
+      'react'
+        ? ''
+        : 'ref' +
+          // below line added from https://github.com/vuejs/vue/blob/72aed6a149b94b5b929fb47370a7a6d4cb7491c5/src/platforms/web/util/attrs.ts#L5
+          'style'
+      )
+        .split(',')
+        .join('\\b|\\b') +
+      '\\b',
+  );
 
 /**
  * Get props used in the components by reference
  */
-export const getProps = (json: MitosisComponent) => {
+export const getProps = (json: MitosisComponent, target: Target) => {
+  const prohibitedKeywordRE = getProhibitedKeywordRE(target);
   const props = new Set<string>();
   traverse(json).forEach(function (item) {
     if (typeof item === 'string') {