Here is my version of the solution by updating your existing code with some logic

const TableData = () => {
  const [oldData, newData] = useState([]);
  const [id, setId] = useState({});

  useEffect(() => {
    fetchData();
  }, []);

  const Id = (dataId) => {
    alert(dataId);
  };
  const Name = (dataName) => {
    alert(dataName);
  };

  const fetchData = async () => {
    try {
      newData(jsonData);
    } catch (e) {
      console.warn(e);
    }
  };

  const updateId = useCallback((dataId) => {
    setId((prevState) => {
      let updatedState = { ...prevState };
      const hasId = updatedState[dataId] ? true : false;

      if (hasId) {
        delete updatedState[dataId];
      } else {
        updatedState = { ...updatedState, [dataId]: dataId };
      }

      return {
        ...updatedState
      };
    });
  }, []);

  const renderTableRows = useCallback(
    (details, isChild = false) => {
      let renderData = [];

      details.forEach((detail) => {
        const detailId = isChild ? detail["sub_id"] : detail["id"];
        const name = isChild ? detail["sub_name"] : detail["name"];

        const childData = (
          <tr key={`${name}-${detailId}`}>
            <td> {detailId} </td>
            <td> {name} </td>
            <td> {detail.owner} </td>
            <td>
              <button onClick={() => Id(detailId)}>getId</button>
              <button onClick={() => Name(name)}>getname</button>
              {detail.sub_details?.length > 0 && (
                <button
                  onClick={() => {
                    updateId(detailId);
                  }}
                >
                  {id[detailId] === detailId ? "Hide" : "Show"} child
                </button>
              )}
            </td>
          </tr>
        );

        renderData.push(childData);

        if (id[detailId] === detailId && detail.sub_details?.length > 0) {
          const childData = renderTableRows(detail.sub_details, true);
          renderData = [...renderData, ...childData];
        }
      });

      return renderData;
    },
    [id, updateId]
  );

  const DisplayData = useMemo(() => {
    return renderTableRows(oldData);
  }, [oldData, renderTableRows]);

  return (
    <div>
      <div>
        <table>
          <thead>
            <tr>
              <th>id</th>
              <th>name</th>
              <th>owner</th>
            </tr>
          </thead>
          <tbody> {DisplayData} </tbody>
        </table>
      </div>
    </div>
  );
};

export default TableData;

here is the example link.

Thanks