ts ref\

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal2/elements.ts

@@ -1,4 +1,7 @@
-import styled from 'styled-components';
+import styled, {
+  StyledComponent,
+  StyledComponentInnerOtherProps,
+} from 'styled-components';
 import css from '@styled-system/css';
 
 export const Container = styled.div(
@@ -109,13 +112,17 @@ export const Input = styled.input<{ code?: boolean }>(({ code }) =>
   })
 );
 
-export const TextArea = styled(Input)(
+export const TextArea = styled(Input).attrs({ as: 'textarea' })(
   css({
     height: 'auto', // let rows attr take care of height
     lineHeight: 1.6,
     marginBottom: 2,
   })
-);
+) as StyledComponent<
+  'textarea',
+  any,
+  StyledComponentInnerOtherProps<typeof Input>
+>;
 
 export const Button = styled.button(
   css({

packages/app/src/app/pages/common/Modals/ShareModal2/index.tsx

@@ -122,7 +122,7 @@ function ShareModal() {
   };
 
   /** Copy Embed code */
-  const urlContainer = React.useRef();
+  const urlContainer = React.useRef<HTMLInputElement | null>(null);
   const [copied, setCopied] = React.useState(false);
 
   const copyEmbedCode = () => {
@@ -256,9 +256,8 @@ function ShareModal() {
           </Section>
           <SectionBody>
             <TextArea
-              as="textarea"
               code
-              rows="5"
+              rows={5}
               readOnly
               value={getUrl(settings, darkMode)}
               ref={urlContainer}