Hi. I'm new to React Native and have been trying to build a toy app on Expo Snack to test connection with OpenAI's ChatGPT. No luck so far. Unsure if it's because there's something wrong with the code or that Snack can't connect to OpenAI's API.

The code is as following:

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
} from "react-native";
import openai from "openai";

const App = () => {
  const [prompt, setPrompt] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const config = {
      apiKey: "MY_API_KEY",
    };
    const openaiClient = new openai.Client(config);
    const response = await openaiClient.Completion.create(
      {
        prompt: prompt,
        temperature: 0.7,
        top_p: 1.0,
      }
    );
    setResponse(response.choices[0].text);
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Enter a prompt"
        value={prompt}
        onChangeText={setPrompt}
        style={styles.input}
      />
      <Button
        title="Submit"
        onPress={handleSubmit}
        style={styles.button}
      />
      <Text style={styles.response}>{response}</Text>
    </View>
  );
};

   const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    width: 300,
    height: 40,
    borderColor: "#ccc",
    borderWidth: 1,
    padding: 10,
  },
  button: {
    width: 300,
    height: 40,
    backgroundColor: "#000",
    color: "#fff",
    borderRadius: 5,
  },
  response: {
    fontSize: 16,
    margin: 10,
  },
});

export default App;