What are the three best ways to reduce code in react?

Question

React

I have this code

import React,{useState,useEffect} from "react";
import ReactDOM from "react-dom";

function App() {
  const [listImg, setLis] = useState([]);
  const [Indx, setIndx] = useState(0);
  const [resErrX, setErrorX] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const Res = await fetch(......);
        const Product = await Res.json();
        setLis(
          Product.x
            .map((value, index) => ({
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              }
            }))
        );
      } catch (error) {
          setErrorX(error.message);
      }
    })();
  }, []);

  return (
    <div className="App">
    </div>
  );
}

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

How to make it so that this part of the code.
app.js

({
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              })

was written in the DD.js file;

const DDX = {
              key: `${value}`,
              z:`${index}`,
              y: `${value}`,
              onClick: () => {
                setIndx(index);
              };

then to import into the App.js file.
but I get Error setIndx(index) that doesn't exist,
can you show three ways to write the code so that this part of the code is written in the DDX.js file and then used in App.js.
if you know other ways to reduce the code, you can show your options.