Adding the Interface

index.diff

import React, { Fragment, useState } from 'react';

...

const Page = () => {

...

-  return
+  return (
+    <section>
+      <div>
+        {!hasVoted ? (
+          <Fragment>
+            {config.map((item, index) => {
+              const { name, id } = item;
+              return (
+                <button key={index} onClick={() => handleClick(id)} disabled={isSubmitting || error}>
+                  <span>{name}</span>
+                </button>
+              );
+            })}
+          </Fragment>
+        ) : (
+          <Fragment>
+            {results.data.map((result, index) => {
+              const { percent, isMax } = result;
+              const name = config[index].name;
+              return (
+                <div key={index}>
+                  <span
+                    style={{
+                      backgroundColor: isMax ? 'blue' : 'gray',
+                      width: `${percent}%`
+                    }}
+                  />
+                  <span>{name}</span>
+                  <span>{`${percent}%`}</span>
+                </div>
+              );
+            })}
+          </Fragment>
+        )}
+      </div>
+      {hasVoted ? <p>{`${results.total} votes`}</p> : null}
+      {error ? <p>{error.message}</p> : null}
+    </section>
+  );
};

export default Page;