How to convert from TSX to JSX in this Codesandbox

I am learning React and JavaScript and now I have this CodeSandbox but I can't convert it to JavaScript React I have tried this for the Card Component:

import React, { useState } from "react";

const Card = props => {
  const [expanded, setExpanded] = useState(false);

  const RenderCard = (className) => {
    return (
      <div
        className={`card ${className}${expanded ? " expanded" : ""}`}
        onClick={() => {
          setExpanded(!expanded);
        }}
      >
        <div className="image">
          <img alt="digger" src={props.image} />
        </div>
        <div className="info">
          <div
            className="bg1"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />
          <div
            className="bg2"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />
          <div
            className="bg3"
            style={{ backgroundImage: "url('" + props.image + "')" }}
          />

          <h1>JCB OES System</h1>
          <h2>Report Number #1</h2>
          <h3>Load lifter work area</h3>

          <div className="button">Open</div>
        </div>
      </div>
    );
  };

  return (
    <div className={`card-container${expanded ? " expanded" : ""}`}>
      {expanded && <div className="background" />}
      {<RenderCard className="card1"/>}
      {<RenderCard className="card2"/>}
    </div>
  );
};

export default Card;

And I show the Card like this. It's very simple, it's just that when I click a card it does not pop up like the CodeSandbox does.

import Card from "./Card";
import "./styles.scss";

const CreateContent = () => {
 
  return (
    <div className="app">
      <link rel="stylesheet" href="https://use.typekit.net/jli8mqj.css" />

      <Card image="https://www.thetimes.co.uk/imageserver/image/methode%2Fsundaytimes%2Fprodmigration%2Fweb%2Fbin%2Fbeae8dfb-0a41-4f8e-b076-ffd68417287b.jpg?crop=1024%2C683%2C0%2C0&resize=685" />
      <Card image="https://www.virginexperiencedays.co.uk/content/img/product/large/PJCBRA__01.jpg" />
      <Card image="https://www.toyfarmers.co.uk/images/britains-jcb-3cx-backhoe-loader.jpg" />
      <Card image="https://seatylive.blob.core.windows.net/eventimages/2019-Aug-20-Tue_18-37-31-969.png" />
    </div>
  );
};

export default CreateContent;

The styles is the same, with no changes: I understand that the expanded background when set to expanded=true using the hook that the scss style for background should be in effect but all I get is a black screen.

.app {
    font-family: sans-serif;
    text-align: center;
    padding: 4em 0;
  }
  
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  .card-container {
    font-family: niveau-grotesk, sans-serif !important;
    position: relative;
    z-index: 0;
    
    &.expanded {
      z-index: 3;
  
      @keyframes fade-in {
        0%   { opacity: 0; }
        100% { opacity: 1; }
      }
  
      .background {
        animation: fade-in .3s ease-out;
        z-index: 2;
        position: fixed;
        background: black;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }
    }
  
    .card {
      margin: 0 auto;
      width: 25em;
      cursor: pointer;
      border-radius: .5em;
      box-shadow: 0 50px 100px -20px rgba(50,50,93,.25), 
        0 30px 60px -30px rgba(0,0,0,.3), 
        0 -18px 60px -10px rgba(0,0,0,.03);
      margin-bottom: 4em;
  
      &.card2 {
        transition: .2s ease-out;
        position: absolute;
        top: 0;
        width: 25em;
        left: 50%;
        z-index: 4;
        transform: translateX(-50%);
  
        &.expanded {
          width: 40em;
        }
      }
    
      .image {
        img {
          display: block;
          border-top-left-radius: .5em;
          border-top-right-radius: .5em;
          width: 100%;
        }
      }
  
      $button-color: rgb(87, 87, 228);
  
      &:hover {
        .info .button {
          color: white;
          background: $button-color;
        }
      }
  
      .info {
        background: white;
        position: relative;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
        overflow: hidden;
        padding: .9em 1.2em;
        text-align: left;
  
        $darkness: 0;
  
        &:after {
          content: '';
          position: absolute;
          top: -20%;
          left: -20%;
          right: -20%;
          bottom: -20%;
          height: 140%;
          width: 140%;
          // filter: blur(8px);
          // -webkit-filter: blur(8px);
          background: linear-gradient(to right, 
            rgba(0, 0, 0, 0.4) 30%, 
            rgba(0, 0, 0, 0) 100%);
        }
  
        .bg1, .bg2 {
          position: absolute;
          top: -20%;
          left: -20%;
          right: -20%;
          bottom: -20%;
          height: 140%;
          width: 140%;
          z-index: 0;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          transform: rotate(180deg);
          filter: blur(16px);
        }
  
        .bg2 {
          background-position: bottom;
          transform: rotate(0deg);
          opacity:0.4;
        }
  
        .bg3 {
          background-position: top;
          transform: rotate(180deg);
          opacity:0.4;
        }
  
        .button {
          transition: .2s ease-out;
          text-transform: uppercase;
          line-height: 1.2em;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 1.8em;
          z-index: 1;
          background: white;
          border-radius: 1em;
          padding: .4em 1.1em;
          font-weight: 600;
          color: $button-color;
        }
  
        h1, h2, h3 {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          max-width: 13em;
          color: white;
          position: relative;
          z-index: 1;
          text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
        }
  
        h1 {
          line-height: .8em;
          letter-spacing: .03em;
          font-size: 1.1em;
          font-weight: 900;
          padding: .1em 0;
        }
  
        h2 {
          letter-spacing: .02em;
          font-size: 1.0em;
          font-weight: 400;
          padding: .1em 0;
          opacity: 0.6;
        }
  
        h3 {
          letter-spacing: .02em;
          font-size: .9em;
          font-weight: 400;
          padding: .1em 0;
        }
      }
    }
  }

What am I missing?

Solution

To swap your Code Sandbox from TypeScript to JavaScript you should just need to:

Remove all typescript specific syntax from your ".ts" and ".tsx" files (interfaces, typings, etc)
Change all the file extensions to their JavaScript equivalent i.e. ".ts" -> ".js" and ".tsx" -> ".jsx".
Update the "main" property of the "package.json" file to point to the renamed entry point. i.e. "src/index.jsx".

I created a quick CodeSandbox with this already done.