JSX syntax error, Unexpected token, expected ","

I am trying to create a ios react JSX app but I keep getting this error and I dont know why. I coppied the ts file from my homescreen file that works so I'm confused on why I'm getting it in this file.

I think it maybe a jest.config.js error so I tried updating config file but that didnt help either.

I greatly appreciate any help you can give me.

PillScanner.ts: Unexpected token, expected "," (14:6)

  12 |   return (
  13 |     <ImageBackground
> 14 |       source={require('../assets/background.jpg')} 
     |       ^
  15 |       style={styles.background}
  16 |     >
  17 |       <View style={styles.bottomNav}>]

Here is my entire file:

import { View, StyleSheet, ImageBackground, TouchableOpacity, Image } from 'react-native';

const PillScanner: React.FC = () => {
  return (
    <ImageBackground
      source={require('../assets/background.jpg')} 
      style={styles.background}
    >
      <View style={styles.bottomNav}>
        <TouchableOpacity>
          <Image
            source={require('../assets/home-icon.png')} // Example image for home icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/calendar-icon.png')} // Calendar icon image
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/user-icon.png')} // Example image for user icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
        <TouchableOpacity>
          <Image
            source={require('../assets/list-icon.png')} // Example image for list icon
            style={styles.navIcon}
          />
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
    resizeMode: 'cover',
  },
  bottomNav: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    position: 'absolute',
    bottom: 20,
    left: 0,
    right: 0,
    padding: 10,
    backgroundColor: 'rgba(255, 255, 255, 0.7)', 
    borderRadius: 15,
    marginHorizontal: 10,
  },
  navIcon: {
    width: 24,
    height: 24,
  },
});

export default PillScanner;

Ensure the file is saved as .tsx and not .ts since it includes JSX syntax