I am trying to import .js comp but it is showing following error

Here is the code index.js

import React from 'react'; import { View, Text, ImageBackground } from 'react-native'; import StyledButton from "../StyledButton"; // here is the problem import styles from './style';

const CarItem = (props) => (

    <ImageBackground
        source={require('../../assets/tesla/6.jpg')}
        style={styles.image} />

    <View style={styles.titles}>

        <Text style={styles.title}> Model G </Text>

        <Text style={styles.subtitles}> Starting from $50,000 </Text>

    </View>
    <StyledButton/>


</View>

); export default CarItem;

this is the error kinldy help Unable to resolve module ../StyledButton from C:\Users\Sufyyan\TeslaClone\Components\CarItem\index.js:

None of these files exist:

• Components\StyledButton(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
• Components\StyledButton\index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json) 1 | import React from 'react'; 2 | import { View, Text, ImageBackground } from 'react-native';

3 | import StyledButton from "../StyledButton"; | ^ 4 | import styles from './style'; 5 | 6 | const CarItem = (props) => {