So i know i can import/export a function. However, if i try to useState inside of the imported function it throws an error. Help me to understand how these work in react functional components.

Mainpage.js:

import React, { useState } from 'react';
import ExampleFunction from './exampleFunction'

const Example = () => {

    ExampleFunction();    

    return (
        <>
            <Button onClick={ExampleFunction}>Click<Button>
        <>
    )
};

ExampleFunction:

import React, { useState } from 'react';
const [Data, setData] = useState('replace with test');

const ExampleFunction = () => {
    setData('test');
}

export default ExampleFunction;