Имя функции, описывающей компонент, должно быть с большой буквы, иначе при транспиляции из JSX не будет создана ссылка на компонент

function Jo () {
  return(
    <div>
      <h1>jojojojo</h1>
    </div>
  )
}
render(<Jo />, document.getElementById('root'))

App.js:

import React from "react";
import ReactDOM from "react-dom";

import App2 from "./App2";

const App = () => {
  const s3 = "foo";
  return <App2 z1={s3} />;
};

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

App2.js:

import React from "react";

const App2 = ({ z1 }) => {
  return <div>{z1}</div>;
};

export default App2;