useContext not unique to every component in flatlist? - reactjs

Question

I have this flatlist which lists all the jobs,upon click we are taken to a Job details page where you can apply to the job. On apply, the button name changes to "applied" and it is disabled. However when I apply to any job, all jobs are disabled. How do I make sure the context is unique to every job in the flatlist?
Home.js:
export default function Home(params) {
const{ navigation}=params;
...
return(
<FlatList
data={getCompanies(companies, filter)}
renderItem={({ item }) => {
return(
<TouchableOpacity onPress={()=>{ navigation.navigate('Job Details',item)}}>
<View style={styles.listingCard}>
<View style={styles.listingCardBody}>
<Text style={styles.listingCardTitle}>{item.title}</Text>
<Text style={styles.listingCardDescription}>
Here is a really simple description from {item.title} about the
role being advertized...
</Text>
</View>
</View>
</TouchableOpacity>
);
}
/>
);
}
Jobdetails:
import {clickableContext} from '../clickableContext';
import {applyButtonContext} from '../applyButtonContext';
function Jobdetails({route, navigation}){
const{ title, Category, rateHourly, responsibilities,location, postedBy,id,jobOverview, jobType, startDate, endDate, latitude, longitude}= route.params;
const { butText, setButText } = useContext(applyButtonContext);
const { clickable, setClickable } = useContext(clickableContext);
return(
<TouchableOpacity disabled={ clickable } style={page.button} onPress={()=>{
//apply() works fine
apply(id).then(async (result)=>{
if(result.succeeded()){
setButText('Application Successful!');
setClickable(true);
}
});
}}>
<Text style={page.text}>{ butText }</Text>
</TouchableOpacity>
);
}
app.js:
import 'react-native-gesture-handler';
import React, {useContext, useState} from 'react';
...
import { applyButtonContext } from './src/api/jobs/applyButtonContext';
import { clickableContext} from "./src/api/jobs/clickableContext";
export default function App() {
const [clickable, setClickable] = useState(false);
const [ butText, setButText] = useState('Apply Now');
return(
<>
{/* Providers */}
<clickableContext.Provider value={{ clickable, setClickable }}>
<applyButtonContext.Provider value={{butText, setButText}}>
<SafeAreaProvider>
<Provider store={store}>
<ThemeProvider>
<NavigationContainer theme={loremipsum}>
<StatusBar barStyle="dark-content" />
<AppNavigation />
</NavigationContainer>
</ThemeProvider>
</Provider>
</SafeAreaProvider>
</applyButtonContext.Provider>
</clickableContext.Provider>
</>
);
}