React Native TypeScript Property 'xxx' does not exist on type 'xx'

Hello I Converted React Native Java Script Project into Typescript all working is fine but some warning is showing me please any one help me out in this ! How to pass props from other folder please look into

import React, { useState, useRef, useEffect } from "react";import { Text, Container, Canvas, Button } from "../../components";import styled from "styled-components/native";const Input = styled.TextInput`  width: 25px;  font-size: 24px;  padding-top: ${(props) => props.theme.spacing.sm};  padding-bottom: ${(props) => props.theme.spacing.sm};  border-bottom-color: ${(props) => props.theme.color.white};`;

Errors are

• Error Property 'spacing' does not exist on type 'DefaultTheme'.
• Error Property 'color' does not exist on type 'DefaultTheme'.

theme.tsx

import React, { createContext, useContext, useState } from "react";import { ThemeProvider as StyledThemeProvider } from "styled-components";import themes from "../themes/";type ThemeContextType = {  theme: string;  setTheme: (value: string) => void;};const ThemeContext = createContext<ThemeContextType | undefined>(undefined);export const ThemeProvider = ({ children }) => {  const [theme, setTheme] = useState(themes["dark"]);  const [themeKey, setThemeKey] = useState("dark");  return (<ThemeContext.Provider value={{ theme, themeKey }}><StyledThemeProvider theme={theme}>{children}</StyledThemeProvider></ThemeContext.Provider>  );};export const useTheme = () => {  return useContext(ThemeContext);};

themes/index.ts

import dark from "./dark";import light from "./light";const themes = {  dark,  light,};export default themes;

light.tsx

const light = {  color: {    background: "#ffffff",    black: "#ffffff",    white: "#000000",  },  spacing: {    xs: "6px",    sm: "8px",  },};export default light;