React - social share micro component with typescript for react component

Question

// 1
// the extension for this component is to use .tsx, typescript
//example SocialShare.tsx

import React, { useState, useRef } from 'react';
import { keyframes, css } from '@emotion/react';
import styled from '@emotion/styled';
import useOnClickOutside from '../../helpers/useOnClickOutside';

const DropDownContainer = styled.div`
  width: auto;
  margin: 0 auto;
  text-align: center;
`;

const rotateMenu = keyframes`
0% {
  transform: rotateX(90deg)
}
100% {
  transform: rotateX(0) 
}
`;

const DropDownHeader = styled.button`
  font-weight: 500;
  border: 0;
  background: transparent;
  color: #333333;
  // text-decoration: underline dotted;
  // text-underline-offset: 2px;
  cursor: pointer;
  :focus:not(:focus-visible) {
    outline: none;
  }
`;

const DropDownListContainer = styled.div`
  position: absolute;
  z-index: 100;
  width: 200px;
  height: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 15%) 0px 10px 37px;
  animation: ${rotateMenu} 300ms ease;
  transform-origin: top center;
  &::-webkit-scrollbar {
    display: none;
  }
`;

const DropDownList = styled.ul`
  padding: 0;
  margin: 0;
  background: #ffffff;
  box-sizing: border-box;
  color: #333333;
  font-weight: 400;
  &:first-child {
    padding-top: 0;
  }
`;

type ListItemProps = {
  checked?: boolean;
};

const ListItem = styled.li<ListItemProps>`
  list-style: none;
  padding: 2px 16px;
  cursor: pointer;
  color: ${props => (props.checked === true ? '#fff' : 'inherit')};
  background: ${props => (props.checked === true ? '#333333' : 'transparent')};
  &:hover {
    color: #333333;
    background-color: #dce8fe;
  }
`;

function SocialShare() {
  const facebook = () => {
    window.open(
      // 'http://facebook.com/sharer.php?u=' + window.location.href,
      //  +'targetWindow',
      // 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
      `http://facebook.com/sharer.php?u=${window.location.href}`,
      '_blank',
    );
  };
  const twitter = () => {
    // window.open(
    //   'http://twitter.com/share?url=' + window.location.href,
    //   +'targetWindow',
    //   'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
    // );
    window.open(
      `http://twitter.com/share?url=${window.location.href}`,
      '_blank',
    );
  };
  const linkedin = () => {
    window.open(
      // 'https://www.linkedin.com/shareArticle?url=' + window.location.href,
      // +'&min=1',
      // 'targetWindow',
      // 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
      `https://www.linkedin.com/shareArticle?url=${window.location.href},&min=1`,
      '_blank',
    );
  };
  const whatsapp = () => {
    const wText = "I've found this on EXAMPLE.COM. cool init?\n";
    window.open(
      // `https://wa.me/?text=${wText}${window.location.href}`,
      // +'targetWindow',
      // 'height=600,width=660,resizable=no,toolbar=no,menubar=no,status=no,location=no,scrollbars=yes',
      `https://wa.me/?text=${wText}${window.location.href}`,
      '_blank',
    );
  };
}

export default SocialShare;


// 2
// add SocialShare component into main component, as shown on the following example
// mainComponent.jsx

import SocialShare from '../global/SocialShare';

return (
  <>
  <SocialShare/>
  </>