Untitled

import React, { createContext, useContext, useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Portal } from '@mui/material';

////////////////////////////////////////////////////////////

const TopbarContext = createContext();

export const TopbarProvider = ({ children }) => {
  const titleRef = useRef(null);
  const searchInputRef = useRef(null);
  const backButtonRef = useRef(null);

  const value = {
    titleRef,
    searchInputRef,
    backButtonRef,
  };

  return (
    <TopbarContext.Provider value={value}>
      {children}
    </TopbarContext.Provider>
  );
};

export const useTopbar = () => {
  return useContext(TopbarContext);
};

////////////////////////////////////////////////////////////

const Topbar = () => {
  const { titleRef, searchInputRef, backButtonRef } = useTopbar();

  return (
    <div className="topbar">
      <div ref={backButtonRef}></div>
      <div ref={titleRef}></div>
      <div ref={searchInputRef}></div>
    </div>
  );
};

export default Topbar;

////////////////////////////////////////////////////////////

export const TopbarTitle = ({ value }) => {
  const { titleRef } = useTopbar();

  return (
    <Portal container={titleRef.current}>
      <h1>{value}</h1>
    </Portal>
  );
};

export const TopbarBackButton = ({ onClick }) => {
  const { backButtonRef } = useTopbar();

  return (
    <Portal container={backButtonRef.current}>
      <button onClick={onClick}>Back</button>
    </Portal>
  );
};

export const TopbarSearchInput = ({ value, onChange }) => {
  const { searchInputRef } = useTopbar();

  return (
    <Portal container={searchInputRef.current}>
      <input type="text" value={value} onChange={onChange} />
    </Portal>
  );
};

////////////////////////////////////////////////////////////

const SomeDropdown = ({ phrase, placeholder, onClose, onSearchPhraseChange }) => {
  return (
    <div>
      <TopbarTitle value={placeholder} />
      <TopbarBackButton onClick={onClose} />
      <TopbarSearchInput value={phrase} onChange={onSearchPhraseChange} />
      
      {/* Reszta komponentu */}
    </div>
  );
};

export default SomeDropdown;

////////////////////////////////////////////////////////////

const App = () => {
  return (
    <TopbarProvider>
      <Topbar />
      <Page>
        <Form />
        {/* Zakładam, że SomeDropdown jest używany gdzieś w Form */}
      </Page>
    </TopbarProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));