Passing data between components using Formik

React Native
1

Hello, Im following the react native course and I have a problem with passing data between two components.

This is short sample of my code:

First component (to enter data):

import React from "react";
import { Formik } from "formik";
import { View, Button, TextInput } from "react-native";

function MyForm({ tasks, setTasks }) {
  return (
    <View>
      <Formik
        initialValues={{ task: "" }}
        onSubmit={(values) => setTasks(values)}
      >
        {({ handleChange, handleSubmit }) => (
          <>
            <TextInput
              onChangeText={handleChange("task")}
              placeholder="Write a task"
            />

            <Button onPress={setTasks} title="Click" />
          </>
        )}
      </Formik>
    </View>
  );
}

export default MyForm;

Second component (to display data):

import React from "react";
import { View, Text } from "react-native";
import MyForm from "./MyForm";

const TaskContainer = ({ tasks, setTasks }) => {
  return (
    <View>
      <Text>Here is the list:</Text>
      {tasks.map((task) => (
        <Text>{task}</Text>
      ))}
    </View>
  );
};

export default TaskContainer;

Im trying to pass the data between both components and display it in second component.
This is sample, what I want to see:

Screenshot_1

I will be grateful for any advice how to do it correctly.