How to define a local variable in another react file?

Question

React

I have to use the Abc variable from a.tsx to another b.tsx file. How can I access this Abc variable in another .tsx file?
Current a.tsx:

export const ProfilePicEditor = (props: ProfilePicEditorProps) => {
    const [Abc, setAbc] = useState(
        'some string'
    )

I tried to do "export {Abc}" in my a.tsx file and import it in b.tsx file as "Import {Abc} from 'a.tsx'". But it didn't work. Any possible reasons?
(I can work with hooks in the same file, but when I try to use the import function in b.tsx, it throws an error when I can't find the name Abc or Abc doesn't exist in the ProfilePicEditor );

Answer 1

Lifting state up
Either use the state management library. For example, Redux or MobX.