JSX dynamic rendering with function binding

Hi I’m trying to write a react component that displays a component by parsing a string to JSX. I was able to do so using react-jsx-parser but it does not work when I pass functions as bindings. The data is displayed properly but the functions don’t seem to be working. I’ve a snippet of what I’m doing right now. Is there a way to pass functions like handleSearchChange below and make it work? My end goal to build a sandbox where users can edit Jsx in a textarea and execute it in real time(including the functions if any). Thank you.

  const handleSearchChange = (e) => {
    console.log("Function Called: handleSearchChange", e.target.value);
    // Additional function logic...
  };


  useEffect(() => {
    fetch(/api/get-jsx/${user})
      .then((res) => res.json())
      .then((data) => {
        setJsxTemplate(data.jsxTemplate); 
        setSandboxJsx(data.jsxTemplate); 
        setData(data);
      })
      .catch((error) => console.error("Failed to fetch shop details:", error));
  }, [user]);

  // Function to handle changes in the sandbox textarea
  const handleJsxChange = (event) => {
    setSandboxJsx(event.target.value);
  };
  const jsxTestString = 
  <input type="text" onChange="{handleSearchChange}" />
;

  return (
    <div>
      {/* Textarea for editing JSX (simple sandbox) /}
      <textarea
        value={sandboxJsx}
        onChange={handleJsxChange}
        style={{ width: "100%", height: "200px" }}
      />
      {/ Render the JSX using JsxParser */}
      {sandboxJsx !== "" && (
        <JsxParser
          jsx={jsxTemplate}
          components={{ Search }}
          bindings={{
            data,
            handleSearchChange: handleSearchChange,
          }}
          onError={(error) => console.error("JsxParser error:", error)}
        />
      )}
    </div>
  );
};