I need help, is there any possible way to send the useEffect submittedInput from search.js to AllThemeContext.js to use it as value of Provider ? Both are in two separated files. Please I asked this question and none has responded please help me. I don't want to move the search to context i want them to stay in separated files.

/Search js/

/*Import*/
import React, { useState } from "react";
import "./Search.scss";
/*Component*/
const Search = () => {
  const [input, setInput] = useState("");
  const [submittedInput, setSubmittedInput] = useState("");

  const onFormSubmit = (e) => {
    e.preventDefault();
    setInput("");
  };

  return (
    <>
      <div className="Search">
        <form onSubmit={onFormSubmit} className="Search__form">
          <input
            value={input}
            onChange={(e) => setInput(e.target.value)}
            type="text"
            placeholder="&#xF002; Title, companies, expertise, or benefits"
            style={{ fontFamily: "Poppins, FontAwesome" }}
          ></input>
          <button onClick={() => setSubmittedInput(input)}>Search</button>
        </form>
      </div>
    </>
  );
};

export default Search;

AllThemeContext:

import React, { createContext, useState } from "react";
export const AllContext = createContext();

const AllContextProvider = (props) => {
  const [input, setInput] = useState();
  const [numbs, setNumbs] = useState(1);
  return (
    <AllContext.Provider value={{ input, numbs }}>
      {props.children}
    </AllContext.Provider>
  );
};

export default AllContextProvider;