React typescript question:

How could I convert the following javascript code to typescript. The method I am trying is at bottom but error occurs. I am also still new to ts and trying to learn it in my spare time.

////////////////////////////////////////////

// my js file

import { createContext, useState, useMemo } from "react";

import { createTheme } from "@mui/material/styles";

// color design tokens export

export const tokens = (mode) => ({

...(mode === "dark"

? {

grey: {

100: "#e0e0e0",

200: "#c2c2c2",

300: "#a3a3a3",

400: "#858585",

500: "#666666",

600: "#525252",

700: "#3d3d3d",

800: "#292929",

900: "#141414",

}

}

: {

grey: {

100: "#141414",

200: "#292929",

300: "#3d3d3d",

400: "#525252",

500: "#666666",

600: "#858585",

700: "#a3a3a3",

800: "#c2c2c2",

900: "#e0e0e0",

}

}),

});

//////////////////////////////

// my ts file

//////////////////

//code(same as above)

import React from 'react'

import { createContext, useState, useMemo} from 'react';

import {createTheme} from "@mui/material/styles";

interface Props {

mode: string;

}

export const tokens: React.FC = ({ mode }) => ({

...(mode === "dark"

? {

grey: {

100: "#e0e0e0",

200: "#c2c2c2",

300: "#a3a3a3",

400: "#858585",

500: "#666666",

600: "#525252",

700: "#3d3d3d",

800: "#292929",

900: "#141414",

},

}

: {

grey: {

100: "#141414",

200: "#292929",

300: "#3d3d3d",

400: "#525252",

500: "#666666",

600: "#858585",

700: "#a3a3a3",

800: "#c2c2c2",

900: "#e0e0e0",

},

}),

});

//////////////////////////////////////////

error:

Type '{ grey: { 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }' is missing the following properties from type 'ReactElement': type, props, key